（一）vue-cli 3.x 脚手架搭建项目及相关配置

1. 安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过以下方式先卸载它：

npm uninstall vue-cli -g 
# 或 
yarn global remove vue-cli 

vue-cli 3.x安装：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

说明：-g / global 表示全局安装。
安装完成后可通过以下代码校验安装是否成功：

vue --version
# 或
vue -V

我使用的npm安装，安装成功后可在npm的目录下看到vue-cli的安装目录文件（\npm\node_modules@vue\cli）

---

2. 创建项目

2.1 使用命令行创建项目

使用 [ vue create 你的项目名称 ] 来创建项目

vue create project-name

若之前创建过项目并保存了preset，那么你可以使用之前保存的preset来创建项目：

# presetName 即你之前保存的preset文件名（完成路径）
vue create --preset <presetName> project-name

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help

若你之前未保存过preset，或若不使用之前保存的preset创建项目，你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“Munually select features”即“手动选择特性”来选取需要的特性，如下图所示。一般会选择手动选择特性。

选择之后会出现如下界面：

• Babel —— ES6转换器
  这个是解析我们es6的代码的，因为对于一些低版本的ie浏览器，还不能识别es6代码，那么vue里面好多要去写es6的代码，这个时候我们就可以用babel这个工具将es6的代码转译成浏览器能识别的代码。
• TypeScript —— 使用JS的超类语言TS
• Progressive Web App Support —— PWA单页应用
• Router —— 使用路由管理器
• Vuex —— 使用 vue 状态管理器
• CSS Pre-processors —— CSS预处理
• Linter / Formatter —— Eslint 安装
• Unit Testing —— 单元测试
• E2E Testing —— 单元测试

以上选项可根据项目需要进行选择，作为测试项目，姑且全选。

选择好后，回车，出现以下界面：

1. 是否使用class风格的组件语法, 选择 yes
   
2. 是否使用babel做转义， 选择 yes
   
3. 是否使用路由的 history模式，选择 yes
   
4. 选择css预处理器，请根据个人情况进行选择，这里我选择的是 Sass/SCSS < with node-sass>
   
5. 选择 Eslint 的使用方式，我选择的 第二项
   
6. 是否把以上的选择作为将来下个项目的模板进行保存，我选择的第一项 Lint on save.
   
7. 单元测试，我选择使用 Jest
   
8. 选择E2E测试解决方案，我选择使用 Nightwatch.
   
9. 选择以上的配置文件放置的位置，一般选择第一项，单独配置。
   
10. 是否保存以上的 preset 配置，可在将来创建项目的时候直接引用，我选择Yes.
    
    然后需要输入preset配置保存的文件名称：

save preset as: mypreset

到此所有的配置项就选择完成了，点击回车，开始创建项目。

---

2.2 使用webstorm创建项目

使用webstorm创建项目，步骤如下：

1. 新建vue.js项目。填写项目路径、Node.js路径、vue-cli，我此处选择vue-cli 3.x的版本
   
2. preset 配置

• 可以使用之前的preset 配置的保存文件
  
• 为了演示，此处我们重新配置一遍
  
  
  
  
  
  
  
  
  
  
  
  
  
  点击next 开始创建项目。

项目目录

项目创建成功后的项目目录如下所示：

---

preset配置文件

以上创建的项目本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。你也可以使用 vue config 命令来审查或修改全局的 CLI 配置。

---

个人学习记录，若有不对的地方或各位有其他看法的地方，请留言指教，谢谢！