Vue自定义创建项目

当我们学习完路由和vuex后，就可以基于VueCli自定义创建项目架子 ！！！

一、创建vue项目

1. 选择一个文件夹

我们需要选择一个文件夹在里面创建Vue项目。

把鼠标移到文件夹里面，点击鼠标右键，选择 在终端中打开。

2. vue create 项目名

在终端中输入：

vue create vue-demo

其中，vue-demo为项目名称，可自行定义（最好是英文）！！！

3.选择 Manually select features

Manually select features ：手动选择功能

可通过按键 ↑ ↓ 进行选择，回车。

4.选择  Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter

通过按键 ↑ ↓ 进行上下移动，空格进行选中和取消，回车。

5. 选择 2.x

我们一般选择 2.x 版本。

6. 输入 n

7. 选择 Less

8. 选择 ESLint + Standard config

ESLint + Standard config：无分号规范【标准化】

9. 选择 Lint on save

10. 选择 In dedicated config files

11. 输入 n

回车！！！项目创建成功！！！

二、ESLint代码规范

代码规范：一套写代码的约定规则。

JavaScript Standard Style 规范说明：

JavaScript Standard Stylehttps://standardjs.com/rules-zhcn.html

代码格式不规范就会报错，一项一项地手动修正错误会很麻烦。

这是我们需要基于vscode插件 ESLint 高亮错误，并通过配置 自动 帮助我们修复错误。

1. 在VSCode扩展商店中输入 ESLint ，进行安装。

 

2. 打开VSCode的设置，在设置页面的右上角 点击 打开设置 图标。

3. 在 setting.json 中输入以下代码

//当保存的时侯，ESLint自动帮我们修复错误

"editor.codeActionsOnSave" : {

​	"source.fixAll" : true

}

//保存代码，不自动格式化

"editor.formatOnSave" : false

注意：代码要放在第一个大括号里面！！！