vue2企业级项目（一）

vue2企业级项目（一）

创建项目，并创建项目编译规范

1、node 版本

由于是vue2项目，所以 node 版本比较低。使用 12.18.3 左右即可

2、安装vue

安装指定版本的vue2

npm i -g vue@2.7.10
npm i -g @vue/cli@4.4.6

3、编辑器规范

1. vscode安装 EditorConfig for VS Code插件

2. 项目根目录创建 .editorconfig文件

3. 填写一下示例内容

   # 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
   root = true# 表示配置所有的文件
   [*]
   # utf-8格式
   charset = utf-8
   # 缩进为2个空格
   indent_style = space
   indent_size = 2
   # 结尾都是用crlf格式, 并且文件保存是结尾换行
   end_of_lint = crlf
   insert_final_newline = true
   # 移除无效空格
   trim_trailing_whitespace = true# 表示配置所有的md文件
   [*.md]
   insert_final_newline = true
   trim_trailing_whitespace = true

4、prettier

4、prettier

1. vscode安装 Prettier - Code formatter插件

2. 项目安装插件

   npm install --save-dev prettier@1.18.2
   

3. 项目根目录创建.prettierignore文件

   dist/*
   node_modules/*
   packages/*
   public/*

4. 项目根目录创建.prettierrc文件

   {"arrowParens": "always","bracketSpacing": true,"endOfLine": "crlf","htmlWhitespaceSensitivity": "ignore","ignorePath": ".prettierignore","jsxBracketSameLine": false,"jsxSingleQuote": false,"printWidth": 80,"quoteProps": "as-needed","semi": true,"singleQuote": false,"tabWidth": 2,"trailingComma": "all","useTabs": false,"vueIndentScriptAndStyle": false
   }
   

5. 添加启动命令到package.json

   "script": {..."format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
   }
   

5、eslint

1. vscode安装 Eslint插件

2. 项目下载依赖

   npm install --save-dev eslint-config-prettier@8.8.0 eslint-plugin-prettier@5.0.0
   

3. 根目录创建.eslintignore文件

   dist/*
   node_modules/*
   packages/*
   public/*

4. 根目录创建.eslintrc.js文件

   module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/essential","eslint:recommended","plugin:prettier/recommended",],parserOptions: {ecmaVersion: 2020,},rules: {"array-callback-return": "error","arrow-parens": "error","arrow-spacing": ["error",{before: true,after: true,},],"comma-dangle": ["error", "always-multiline"],"object-curly-spacing": ["error", "always"],"key-spacing": ["error", { beforeColon: false, afterColon: true }],"comma-spacing": ["error",{before: false,after: true,},],indent: ["error",2,{SwitchCase: 1,},],"for-direction": "error","keyword-spacing": ["error",{before: true,after: true,},],"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off","no-extra-semi": "error","no-multi-spaces": "error","no-multiple-empty-lines": ["error",{max: 3,maxEOF: 1,maxBOF: 1,},],"prettier/prettier": "off",quotes: ["error", "double"],"semi-spacing": ["error",{before: false,after: true,},],"semi-style": ["error", "last"],semi: ["error","always",{omitLastInOneLineBlock: true,},],"space-after-keywords": [0, "always"],"space-infix-ops": "error","spaced-comment": ["error","always",{block: {exceptions: ["*"],balanced: true,},},],},
   };

5. 添加启动命令到package.json

   "script": {...,"eslint:fix": "eslint src/**/* --ext .js,.vue",
   }
   

6、stylelint

1. vscode安装stylelint插件

2. 项目安装依赖

   npm install --save-dev stylelint@15.3.0 stylelint-config-recommended@11.0.0 stylelint-config-recommended-vue@1.4.0 stylelint-config-recommended-vue@1.4.0 stylelint-config-standard@25.0.0 stylelint-config-prettier@9.0.5 stylelint-order@5.0.0 stylelint-less postcss-html postcss-less@4.0.0 less-loader@4.1.0 less@4.1.3
   

3. 根目录创建.stylelintignore文件

   dist/*
   node_modules/*
   packages/*
   public/*
   

4. 根目录创建.stylelintrc.js文件

   module.exports = {extends: ["stylelint-config-recommended","stylelint-config-standard","stylelint-config-recommended-vue","stylelint-config-html","stylelint-config-prettier",],plugins: ["stylelint-order", "stylelint-less"],ignorePath: ".stylelintignore",overrides: [{files: ["**/*.{html,vue}"],customSyntax: "postcss-html",},{files: ["**/*.less"],customSyntax: "postcss-less",},],rules: {"declaration-block-no-duplicate-properties": [true,{ignore: "consecutive-duplicates",},],indentation: 2,"selector-pseudo-element-no-unknown": [true,{ignorePseudoElements: ["v-deep"],},],"number-leading-zero": "never","no-descending-specificity": null,"font-family-no-missing-generic-family-keyword": null,"selector-type-no-unknown": null,"at-rule-no-unknown": null,"no-duplicate-selectors": null,"no-empty-source": null,"block-no-empty": true,"max-nesting-depth": null,"max-line-length": null,"selector-max-compound-selectors": null,"selector-no-qualifying-type": null,"selector-class-pattern": null,"function-no-unknown": null,"function-parentheses-newline-inside": null,"alpha-value-notation": "number","no-empty-first-line": true,"order/properties-order": ["width","min-width","max-width","height","min-height","max-height","position","top","right","bottom","left","z-index","display","flex-wrap","justify-content","align-items","float","clear","overflow","overflow-x","overflow-y","padding","padding-top","padding-right","padding-bottom","padding-left","margin","margin-top","margin-right","margin-bottom","margin-left","font-size","font-family","font-weight","text-justify","text-align","text-indent","text-align","text-overflow","text-decortion","white-space","color","background","background-position","background-repeat","background-size","background-color","background-clip","border","border-style","border-width","border-color","border-top-style","border-top-width","border-top-color","border-right-style","border-right-width","border-right-color","border-bottom-style","border-bottom-width","border-bottom-color","border-left-style","border-left-width","border-left-color","border-radius","opacity","filter","list-style","outline","visibility","box-shadow","text-shadow","resize","trasition",],"selector-pseudo-class-no-unknown": [true,{ ignorePseudoClasses: ["global"] },],},
   };

5. 添加启动命令到package.json

   "script": {...,"stylelint:fix": "stylelint src/**/*.{html,vue,less} --fix",
   }
   

6. 在vscode配置文件新增内容如下

   ...
   "editor.codeActionsOnSave": {"source.fixAll.stylelint": true
   },
   "stylelint.validate": ["vue", "less", "css", "html", "scss", "sass"]
   

7、可选链

1. 项目安装依赖

   npm install --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator

2. 项目根目录babel.config.js修改如下

   module.exports = {presets: ["@vue/cli-plugin-babel/preset"],plugins: ["@babel/plugin-proposal-optional-chaining","@babel/plugin-proposal-nullish-coalescing-operator",],
   };
   

8、commitlint

1. 执行命令

   vue add commitlint
   

2. 下载依赖

   npm install --save-dev lint-staged@9.5.0
   

3. 修改package.json配置

   ...
   "husky": {"hooks": {"pre-commit": "lint-staged","commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},"lint-staged": {"*.{js,vue}": ["vue-cli-service lint ./src --fix","prettier --write ./src","git add"]}