12.vue cli-脚手架的基本使用

一、安装 vue cli

1.如果已经安装较低版本的cli，则需要remove当前的cli

npm uninstall -g vue-cli

2.安装最新版本的cli

npm install -g @vue/cli

3.查看当前cli的版本

vue -V

二、利用 vue cli 创建vue项目

1.基于“交互式命令行”的方式创建新版vue项目

1.自定义项目名称：my_pro_01

vue create my_pro_01 

2.通过方向键选择手动创建项目，回车下一步

3.选中需要安装的内容，空格键选中，回车下一步

4.选择是否需要使用历史路由的模式，我们选择否，否为使用hash路由的模式

5.选择linter/formatter的配置，一般选用standard config

6.选择其他的lint功能，这里我们选用Lint to save

7.选择单独存放配置文件

8.是否作为配置预设，这里我们第一次创建，可以作为预设，方便以后快速创建vue项目

9.创建vue项目成功

10.进入项目路径，并运行，复制地址就可以在浏览器中访问了

2.基于“图形化界面”的方式创建新版vue项目

1.输入命令进入图形化创建页面

vue ui

2.进入图形化界面，创建项目，步骤跟之前命令行一样