一、vue-cli的安装和项目创建

1. 准备

安装vue-cli脚手架工具需要先确保电脑上有安装node，安装node会自动帮我们安装npm包管理工具。

检测有没有安装node,可以在命令提示符中输入下面语句

node --version

v12.13.0

输出的就是本地安装的node的版本号。 说明node已经安装。

npm --version

6.13.0

说明本地npm包管理工具他的版本是6.13.0

确认本地node和npm都安装完毕后，才可以继续后续步骤

2.安装vue-cli脚手架工具

2.1 npm包管理工具常用命令

1. npm install / npm i 安装
2. npm uninstall /npm un 卸载
3. npm list 列出安装了哪些npm包

npm install

默认情况下，会下载latest版本的包，然后安装在名字执行时所在的文件夹下。

npm install axios

如果要指定安装该包的某一个版本。在包名后面跟上@版本号

npm install [email protected]

如果我们将包装在某个文件夹下，这时候，我们安装的这个包，只能在该文件夹及其子文件夹下使用。

如果我要安装包，这个包所有的程序都可以调用，我们就把他安装到系统全局目录下

npm install axios --g

npm list --g

全局目录一般是

C:\Users\用户名\AppData\Roaming\npm

npm uninstall

npm uninstall axios

如果要卸载全局的包

npm uninstall axios --g

npm list

当前目录下有哪些包

npm list

要查看全局的

npm list --g

2.2 安装vue-cli

如果安装最新的3.x版本，不要使用下面语句

npm install vue-cli --g

vue-cli 1.x~2.x包名都是vue-cli

从3.x开始，包名已经改成了@vue/cli

npm install @vue/cli --g

苹果系统请使用

sudo npm install @vue/cli --g

如果很慢可以设置数据源为淘宝的数据镜像。

npm config set registry https://registry.npm.taobao.org

然后输入：

npm config get registry

验证一下数据源是不是刚才设置的路径。然后再重新安装，就会发现快多了。

验证vue-cli是否安装成功

vue  --version

3. 使用脚手架建立项目

3.1. 通过命令行

将命令行定位到要建立项目的目录下

vue create test1

将建立名称为test1的项目。 配置选择default就行了。

耐心等待项目创建完毕： 使用下面命令，进入test1目录，然后调用 npm run serve启动服务器。

 cd test1
 npm run serve

3.2. UI界面

vue ui