vue还是比较容易上手的,所以获得开发者的青睐,这是一个原因。下面记录一下,创建一个入门vue项目的过程,记录自己学习的点滴。
首先
需要满足的前提:安装node.js和npm
以及安装需要的工具webpack
和vue-cli
,从Node.js官网下载对应平台的安装程序,目前版本的node.js都已经集成了npm,所以安装node.js就可以了。安装完成后,在windows环境请打开命令提示符,然后输入node -v
,如果安装正常,你应该看到v6.10.3
这样的输出:
C:\Users\John>node -v
v6.10.3
那么npm是什么呢,我之前写过一篇文章,戳这里:https://www.haoht123.com/1054.html
输入npm -v
,如果安装正常,你应该看到3.10.10
这样的输出:
C:\Users\John>npm -v
3.10.10
安装webpack,依然是在命令行安装,输入npm install webpack -g
,其中-g代表全局安装,是英文global
的缩写。输入webpack -v
,如果如下方显示4.17.1
,则表示安装正常。
C:\Users\John>webpack -v
4.17.1
安装vue -cli,依然是命令行安装,输入npm install vue-cli-g
。完成后输入vue -V
(注意是大写的V),如果下方显示2.9.1
,则表示安装正常。
C:\Users\John>vue -V
2.9.1
然后
输入vue init webpack demo
demo是你要创建的项目名字,本文以demo为例,注意:不可以为中文,一路回车,等待下载完成就好。
创建完成的目录结构以及描述如下:
最后
输入npm run dev
运行项目,如果出现了以下页面,则表示success:
完。