vue2企业级项目（一）
vue2企业级项目（一）
创建项目，并创建项目编译规范
1、node 版本
由于是vue2项目，所以 node 版本比较低。使用 12.18.3 左右即可
2、安装vue
安装指定版本的vue2
npm i -g [email protected]
npm i -g @vue/[email protected]
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 [email protected] -
项目根目录创建
.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 [email protected] [email protected] -
根目录创建
.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 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] stylelint-less postcss-html [email protected] [email protected] [email protected] -
根目录创建
.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 [email protected] -
修改
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" ] }