Better

最近公司非前端人员，有需要使用 Vue 的需求，写点小总结

vue-cli 4.x

执行如下命令创建项目

vue create project_name

不使用默认配置，结合当前前端团队项目选择情况，大致如下

• 开启 Babel/PWA/Router/Vuex/CSS Pre-processors/Linter/Unit/E2E，Vue@2.0 项目暂时不开启 TypeScript
• 路由使用 history mode
• 使用 Less 预处理
• 开启 Eslint/Prettier
• Lint on save
• Jest（for unit test）
• Cypress（for e2e test）

vscode 插件

为了良好的开发体验和团队规范，请安装如下插件

• Prettier
• Eslint
• Vetur

相关配置

除脚手架提供的 .eslintrc.js，项目中新增符合团队风格 .editorConfig 和 .prettierrc.js 文件。

不知道定义啥？这里甩给你一套常用的

.editorConfig 示例

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

.prettierrc.js 示例

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  proseWrap: 'never',
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json',
      },
    },
    {
      files: '.html',
      options: {
        parser: 'html',
      },
    },
  ],
};

此外 .eslintrc.js 中添加如下配置，这是平台换行符不同导致的问题

'prettier/prettier': 'off',

vscode 用户设置

建议开启保存格式化功能，首选项 -> 设置 -> 用户设置，进入 settings.json 文件，添加

"editor.formatOnSave": true,

pre-commit

在 git hook 中添加 lint 校验和 prettier 格式化