1 需求

• 满足前端编码规范
• 支持多语言
• 支持主题动态切换（意味着标准的 css， var）
• 支持打点 - 尽量不耦合
• 支持单元测试

2 项目搭建

2.1 使用 vue-cli 创建项目

// 使用命令创建一个名为 vue-standard 的项目
vue create vue-standard
// 选择以下配置：  
Babel、TypeScript、Router、Vuex、CSS Pre-processors、  
Linter / Formatter、Unit Testing    
css预处理器：SCSS/SASS  
ESLint + prettire
单元测试：Jest  
配置文件单独文件夹

创建完成后，使用 ant-design-vue UI 框架

// 1、安装 antd
npm i --save ant-design-vue

// 2、安装 babel-plugin-import，用来按需加载
npm install babel-plugin-import --save-dev

// 3、修改babel.config.js文件，配置 babel-plugin-import
module.exports = {
  presets: ["@vue/app"],
  // 按需引入Ant Design of Vue组件样式
  plugins: [
    [
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
    ]
  ]
};

详见：www.antdv.com/docs/vue/ge…
重启项目时，出现以下问题：

解决方案： npm install --save core-js
参考：github.com/vuejs/vue-c…

解决：blog.csdn.net/qq_35366269…

解决：开启 JavaScript
参考：github.com/ant-design/…

// 在vue.config.js 里加入：
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    },
}

// 或者（可能受版本影响），出现以下 error
// options has an unknown property 'javascriptEnabled'. These properties are valid:
// object { lessOptions?, prependData?, appendData?, sourceMap? }
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
};

然后，就能在项目中顺利使用 ant 的组件啦~

3 编码规范

标准参考：juejin.cn/post/684490…

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  parserOptions: {
    // 指定 ECMAScript 的版本
    ecmaVersion: 6,
    sourceType: 'module',
    // 额外使用的语言特性
    ecmaFeatures: {
      jsx: true
    },
    parser: '@typescript-eslint/parser',
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 不允许函数参数名重复
    "no-dupe-args": "error",
    // 采用2个空格缩进
    "indent": ["error", 2],
    // 禁止修改 const 声明的变量
    "no-const-assign": "error",
    // 禁止使用 var 声明变量
    "no-var": "error",
    // 禁止在逗号前使用空格, 要求在逗号后使用一个或多个空格
    "comma-spacing": ["error", { "before": false, "after": true }],
    // 要求使用拖尾逗号
    "comma-dangle": ["error", "always-multiline"],
    // 操作符周围要带空格
    "space-infix-ops": ["error", {"int32Hint": false}],
    // 字符串使用单引号
    "quotes": ["error", "single"],
    // 将大括号放在控制语句或声明语句同一行的位置
    "brace-style": "error",
    // 禁止在 return 后出现不可达代码
    "no-unreachable": "error",
    // 要求 return 语句之前有一空行
    "newline-before-return": 0,
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ]
};

// prettier.config.js
module.exports = {
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 80,
};

4 支持多语言

使用 vue-i18n 插件

vue add i18n

安装成功，然后，就遇到了大坑，吐血。。

// 错误信息 Interface 'Require' incorrectly extends interface 'RequireFunction'. Types of property 'cache' are incompatible. Type 'Dict' is not assignable to type '{ [id: string]: NodeModule; }'. Index signatures are incompatible. Type 'NodeModule | undefined' is not assignable to type 'NodeModule'. Type 'undefined' is not assignable to type 'NodeModule'.ts(2430) Caused by field cache: Dict<NodeModule> (changing to Dict<any> fixes it but not sure that is the accepted solution)

相同问题的issue：github.com/DefinitelyT…
看了里面的解决方案，一同操作，并没解决

后续： 重新安装后，没有以上问题。。。

// 切换语言
this.$i18n.locale = 'en';

5 主题动态切换