vue/cli4搭建配置脚手架

1.老版本vue/cli删除(直接创建新版本即可)

		1.检查自己当前vue/cli版本
          vue -V
        2.低于@4.0直接卸载
          npm uninstall vue-cli -g

2.vue/cli3 想要升级到 vue/cli4

		1.全局下载最新的版本
          npm install -g @vue/cli
        2.下载完成检查当前版本  ###如果还是显示之前的版本，重启电脑在检查一遍###
          vue -V //输出:@vue/cli 4.x.x

升级版本的坑比较多，推荐一个爬坑的文章

3.创建vue/[email protected]

	//创建项目命令（test-vue自定义项目名称）
     vue create test-vue

3.1 选择你的配置项（配置完成以后可以记录自己的配置选择，方便以后创建）

按方向键 ↓ 来选择 “Manually select features” 配置项目（空格是选择，i是反选，a是全选，enter回车是确定）

我选择后的配置项

3.2 选择是否使用history router

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置。

3.3 选择个人喜欢的css预处理器

之前一般使用的都是Sass/Scss(with node-sass)自动编译的处理器，今天选择了保存后才编译的处理器Sass/Scss(with dart-sass)

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。了解相关知识点

3.4 选择Eslint代码验证规则

提供一个插件化的javascript代码检测工具，ESLint + Prettier （使用较多）

3.5 选择什么时候进行代码规则检测

( ) Lint on save // 保存就检测 (个人选择)
( ) Lint and fix on commit // fix和commit时候检查

3.6 选择单元测试

Mocha + Chai : mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest : 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

3.7 选择配置文件存放设置

In dedicated config files // 独立文件放置
In package.json // 放package.json里

3.8 是否保存当前配置(对应3.1，如果保存配置需要输入保存的名称，下次创建项目就会三个选项，其中一个就是你起名字的自定义配置)

3.8 输入提示的那两个命令，项目就可以启动了

访问端口http://localhost:8080就可以了

4.0 通过vue ui可视化方式添加element-ui组件库

	# 终端执行vue ui打开项目可视化操作界面
	vue ui

4.1 执行命令后会有一个网页弹出

4.2 点击导入按钮，导入当前项目文件夹即可

4.3 添加插件步骤，然后在搜索框中搜索你需要的插件

4.4 搜索element，出现的第一个便是element-ui组件库，点击第一项右边的加号添加组件库在项目，会自动安装相关依赖到项目中

4.5 安装插件时会出现选项，到底是全部引入，还是按需引入，如果不修改的话，默认是全部引入，按需求选择即可，还有一个选项是本地语言选择，默认是中文

4.6 最后一步可视化操作界面会获取相关文件的改动，你可以选择提交修改（即添加到本地git版本管理），或者是选择跳过，就完成了本次添加插件的过程。

（注:如果不喜欢这个可视化的方法添加，可以自己手动添加，这里就不写手动添加教程了）

4.7vue可视化管理功能也很强大，可以直接起服务进行开发，还有其他各种环境运行，点击serve然后点击运行就可以启动我们的vue项目了，这里还有监测的仪表盘，让你的能更快捕捉错误信息