关于vue-cli3.0的安装搭建项目网上也有很多文章，最近整理电脑，翻起之前的笔记记录，打算放到博客上，在此整理整理，简单存档记录一下。
1、先全局安装vue-cli 3.0
npm install -g @vue/cli
查看安装的版本 vue –version 或者 vue -V
2、创建一个项目
vue-cli3.0是通过vue create来创建一个项目，比如我们要创建一个新的项目叫vue-cli33-select，执行如下命令即可：
vue create vue-cli33-select如图所示：
查看帮助 vue –help
查看具体命令的帮助 vue create –help
3、选择我们的配置
我们可以选择默认的还是手动配置，这里选择手动配置为例
3.1 、选择Manually select features 如上图所示
3.2、选择你项目需要的一些特性
大家根据自己的需要选择，敲空格键配合方向键进行选择。这里个人选择Babel、vue-router、vuex、CSS预处理器、Linter代码检测和格式化 然后回车， 如图所示：
3.3、是否使用history路由？这里选择yes
history路由具体文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html
3.4、选择css处理器，这里sass，大家可以根据自己需要选择
3.5、选择ESLint的代码规范，这里选择eslint + standard config
JavaScript standard 代码规范全文
3.6、选择何时（保存还是更新提交）进行代码检测，这里选择保存时进行检测
3.7、选择Babel、PostCSS、ESLint等配置文件存放位置
这里选择第一个，单独保存在各自的config文件中
3.8、是否保存本次创建项目的配置项？
此项选择可以用于下次快速创建项目，如果选择yes，那么之后所有新建项目都按这次的配置来新建，这里选no，个人建议选择no。
3.9、然后回车开始创建我们的项目，等待初始化安装完就可以了。
看到如图所示说明成功了。
4、使用npm run serve运行我们的项目
cd 我们的项目（vue-cli33-select）目录， 然后使用npm run serve可以运行我们的项目，http://localhost:8080/ 打开就可以看到我们的运行的结果了，如图
此时我们的项目如下所示：
package.json代码如下：
{
"name": "vue-cli33-select",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
}
}
如果要安装一下插件，在3.0中 使用add方法， vue add vuetify
如何拉取 cli2.x 模板 (旧版本)？
vue cli 3 和旧版使用了相同的 vue 命令，所以vue-cli2 被覆盖了。如果你仍然想使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
然后初始化新建我们的项目就可以了。
vue init webpack my-project
二、我们还可以使用vue ui可视化界面来创建项目
vue ui 给我们提供了一套完整的vue项目构建的可视化界面，对我们来说，有更多的自由和便利性。
1、输入vue ui，如图所示：
浏览器会打开http://localhost:8000/project/select，我们选择创建，都是可视化的，按文字意思的说明步骤来就可以创建项目了。选择配置跟上面配置一致。这里就不详细说明了。
选择完以后等待创建。安装成功后，如图所示
最后在任务（http://localhost:8000/tasks）菜单里，运行，打开http://localhost:8080/ 就可以打开我们的项目了
项目目录如下：
CLI2.0的项目目录
三、Vue CLI2.0和Vue CLI3.0的一些区别
简单记录一下它们的一些区别
1、目录结构的不同
1）、看比较，最直观的区别就是：CLi3.0中少了build、config两个目录，CLi3.0目录结构看起来更简洁了，而且node_modules也给自动下载好了。至于build、config中的相关配置，我们可以在根目录新建一个vue.config.js来实现。
2）、在CLi2.0中 ，static默认是存放静态文件，比如图片，打包不经过webpack编译，直接拷贝一份到dist的。
在CLI3.0中，没了static文件夹，新增public文件夹，在CLI3.0中，静态资源有两种处理方式，经过webpack处理和不经过webpack处理。
3）、在CLI3.0中，index.html放在public文件夹中了，它会被 html-webpack-plugin 处理。
官方文档：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html
2、vuex 的不同
在CLi2.0中 ，我们是搭建完成后，需要自己npm install的。
在CLI3.0中，是在搭建过程中，供我们选择的，而且只用一个store.js。
3、配置Babel的不同
CLI3.0中是使用了Babel7 中的新配置格式 babel.config.js，通过 babel.config.js 可以配置使用任何其它 Babel 预设选项或插件。
4、启动服务方式的不同
//2.0 npm run dev //3.0 npm run serve因为：
CLI2.0中启动方式是webpack-dev-server –inline –progress –config build/webpack.dev.conf.js，使用的是webpack-dev-server搭的服务。
CLi3.0启动方式是vue-cli-service serve，文件位于node_modules@vue\cli-service\bin。
官方文档：https://cli.vuejs.org/zh/guide/cli-service.html
vue-cli3.0入门-配置vue.config.js文件（三）
