基于VueCli自定义创建Vue项目架子

一、VueCli 自定义创建项目

1.1安装脚手架 (已安装)

安装脚手架前提需要安装node【node安装成功后，自带npm】

npm install -g @vue/cli

npm i @vue/cli -g

1.2.创建项目

vue create hm-exp-mobile

1.2.1选项

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

1.2.2手动选择功能（按空格可选中）

1.2.3选择vue的版本

  3.x
> 2.x

1.2.4是否使用history模式

1.2.5选择css预处理

1.2.6选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）文末有彩蛋~

比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子（本次选择无分号规范）

1.2.7选择校验的时机 （直接回车）

1.2.8选择配置文件的生成方式 （直接回车）

1.2.9是否保存预设，下次直接使用？ => 不保存，输入 N

1.2.10等待安装，项目初始化完成（使用yarn启动项目，需要用npm进行安装yarn）

1.2.11启动项目

npm run serve

三.ESlint代码规范

JavaScript Standard Style规范说明

举例：

• 字符串使用单引号
• 无分号
• 关键字后加空格
• 函数名后加空格
• 坚持使用全等 === 摒弃 ==
  

3.1解决方案

• 手动修正：根据错误提示，对照 ESLint 规则表手动一步一步修正。
• 自动修正
  VSCode中安装插件ESLint。

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

注意：

• eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
• 使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify