vue-cli 3.0 命令行创建项目

使用前我们先了解一下3.0较2.0有哪些区别

一.新加入了TypeScript以及PWA的支持
二.部分命令发生了变化：

1.下载安装npm i -g @vue/cli
2.删除了 vue list
3.创建项目 vue create
4.启动项目 npm run serve

三.默认项目目录结构也发生了变化

1.移除了默认配置文件目录，config 和 build 文件夹
2.移除了static文件夹，新增public文件夹，并且index.html移动到public中
3.在src文件夹中新增了views文件夹，用于分类视图组件和公共组件

注意：vue-cli>=3和旧版使用了相同的vue命令，所以vue -cli 2被覆盖了。如果仍要使用旧版vue init功能，你可以使用一个桥接工具

npm i -g @vue/cli-init
vue init webpack my-project

下面进入正题，进行安装和创建项目

首先安装npm3.0，在安装之前如果曾经安装过vue-cli2的，由于vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，建议把旧版本的卸载了，再安装新版本。

// 卸载指令如下：
npm uninstall vue-cli -g

yarn global remove vue-cli

npm install -g @vue/cli

下一步创建项目文件

vue create projectname //项目名

下一步选择快捷式安装配置

前面的是你之前安装的项目配置，第二个是默认配置，最后一个是自行配置，建议选最后一个

下一步自行选择安装配置

这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定 1、Babel，转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等 2、TypeScript，新增的选项卡 3、PWA，模拟原生app，渐进式网络应用程序 4、路由 5、vuex管理模式 6、css预处理语言 7、代码规范 8、组件单元测试 9、端对端测试，模拟用户真实场景

下一步选择css预处理语言