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、编辑器规范
-
vscode
安装EditorConfig for VS Code
插件 -
项目根目录创建
.editorconfig
文件 -
填写一下示例内容
# 表示是最顶层的配置文件,发现值为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
-
vscode
安装Prettier - Code formatter
插件 -
项目安装插件
npm install --save-dev prettier@1.18.2
-
项目根目录创建
.prettierignore
文件dist/* node_modules/* packages/* public/*
-
项目根目录创建
.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 }
-
添加启动命令到
package.json
"script": {..."format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"", }
5、eslint
-
vscode
安装Eslint
插件 -
项目下载依赖
npm install --save-dev eslint-config-prettier@8.8.0 eslint-plugin-prettier@5.0.0
-
根目录创建
.eslintignore
文件dist/* node_modules/* packages/* public/*
-
根目录创建
.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,},},],}, };
-
添加启动命令到
package.json
"script": {...,"eslint:fix": "eslint src/**/* --ext .js,.vue", }
6、stylelint
-
vscode
安装stylelint
插件 -
项目安装依赖
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
-
根目录创建
.stylelintignore
文件dist/* node_modules/* packages/* public/*
-
根目录创建
.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"] },],}, };
-
添加启动命令到
package.json
"script": {...,"stylelint:fix": "stylelint src/**/*.{html,vue,less} --fix", }
-
在
vscode
配置文件新增内容如下... "editor.codeActionsOnSave": {"source.fixAll.stylelint": true }, "stylelint.validate": ["vue", "less", "css", "html", "scss", "sass"]
7、可选链
-
项目安装依赖
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
-
项目根目录
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
-
执行命令
vue add commitlint
-
下载依赖
npm install --save-dev lint-staged@9.5.0
-
修改
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"]}