【Vue】從 0 搭建一個 Vue3 規範化、企業級項目骨架

本篇文章將從 0 開始搭建一個企業可用的項目骨架,這裏我使用的包管理工具時 pnpm(跟 npm、yarn 差不多)

通過 Vite 安裝 Vue3 項目

pnpm create vite

然後依次輸入項目名稱(可選)、選擇 Vue + Typescript

image

代碼規範

ESlint+Prettier

兩個工具一個是進行代碼風格檢查,另一個是格式化工具。

第一步,安裝相關依賴:

pnpm add eslint eslint-plugin-vue eslint-define-config -D # eslink
pnpm add prettier eslint-plugin-prettier @vue/eslint-config-prettier -D # prettire
pnpm add @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D # 對ts的支持

第二步,編寫對應配置文件:

.eslintrc.js

const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  root: true,
  /* 指定如何解析語法。*/
  parser: 'vue-eslint-parser',
  /* 優先級低於parse的語法解析配置 */
  parserOptions: {
    parser: '@typescript-eslint/parser',
    //模塊化方案
    sourceType: 'module',
  },
  env: {
    browser: true,
    es2021: true,
    node: true,
    // 解決 defineProps and defineEmits generate no-undef warnings
    'vue/setup-compiler-macros': true,
  },
  // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
  globals: {},
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // typescript-eslint推薦規則,
    'prettier',
    'plugin:prettier/recommended',
  ],
  // https://cn.eslint.org/docs/rules/
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    semi: 'off',
    // 優先使用 interface 而不是 type
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 類型
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    // 解決使用 require() Require statement not part of import statement. 的問題
    '@typescript-eslint/no-var-requires': 0,
    // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
    '@typescript-eslint/ban-types': [
      'error',
      {
        types: {
          // add a custom message to help explain why not to use it
          Foo: "Don't use Foo because it is unsafe",

          // add a custom message, AND tell the plugin how to fix it
          String: {
            message: 'Use string instead',
            fixWith: 'string',
          },

          '{}': {
            message: 'Use object instead',
            fixWith: 'object',
          },
        },
      },
    ],
    // 禁止出現未使用的變量
    '@typescript-eslint/no-unused-vars': [
      'error',
      { vars: 'all', args: 'after-used', ignoreRestSiblings: false },
    ],
    'vue/html-indent': 'off',
    // 關閉此規則 使用 prettier 的格式化規則,
    'vue/max-attributes-per-line': ['off'],
    // 優先使用駝峯,element 組件除外
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        ignores: ['/^el-/', '/^router-/'],
        registeredComponentsOnly: false,
      },
    ],
    // 強制使用駝峯
    camelcase: ['error', { properties: 'always' }],
    // 優先使用 const
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
  },
})

.eslintignore

/node_modules/
/public/
.vscode
.idea

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

husky

husky 是一個 Git Hook,可以幫助我們對 commit 前,push 前以及 commit 提交的信息進行驗證,現在我們就來安裝並配置一下這個工具,首先通過自動配置命令安裝,命令如下:

pnpm dlx husky-init # pnpm
npx husky-init && npm install  # npm
npx husky-init && yarn         # Yarn 1
npx husky-init --yarn2 && yarn # Yarn 2+

執行完畢之後會在項目的根目錄出現一個.husky的目錄,目錄下有一個pre-commit文件,我們將npm test修改爲我們需要執行的命令,示例代碼如下:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

我們配置一下 package.json,示例代碼如下:

"scripts": {
  "lint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue && prettier --write --ignore-unknown"
},
  • src:要驗證的目標文件夾;
  • --fix:自動修復命令;
  • --ext:指定檢測文件的後綴。

現在我們進行commit之前會對代碼進行檢測並進行格式化。

lint-staged

我們配置好了 husky 後,會出現一個問題,就是我們不管是改動一行還是兩行都會對整個項目進行代碼檢查和格式化,我們可以通過 lint-staged 這個工具來實現只對 git 暫存區中的內容進行檢查和格式化,配置步驟如下:

第一步,安裝 lint-staged:

pnpm add lint-staged -D

第二步,配置package.json:

{
  "scripts": {},
  // 新增
  "lint-staged": {
    "*.{vue,js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ]
  },
}

第三步,修改 .husky/pre-commit,修改內容如下:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

over!

commit message 規範

優秀項目中 commit message 都是統一風格的,這樣做的好處就是可以快速定位每次提交的內容,方便之後對版本進行控制。現在我們就來配置一下 commit message 規範。

  1. 安裝 commitizen
pnpm add commitizen -D
  1. 配置項目提交說明,這裏我們使用 cz-conventional-changelog,或者選擇 cz-customizable,我們先進行安裝:
pnpm add cz-conventional-changelog -D
  1. 修改 package.json,代碼如下:
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}
  1. 進行 commit,通過 cz 這個 cli 工具:
pnpm cz # 或者 npx cz

第一步,選擇本次更新的類型,每個類型的作用如下表所示:

image

Type 作用
feat 新增特性
fix 修復 bug
docs 修改文檔
style 代碼格式修改
refactor 代碼重構
perf 改善性能
test 測試
build 變更項目構建或外部依賴(例如 scopes: webpack、gulp、npm等)
ci 更改持續集成軟件的配置文件和 package.json 中的 scripts 命令
chore 變更構建流程或輔助工具(比如更改測試環境)
revert 代碼回退

第二步,填寫改變的作用域(可選),可以寫組件名或者文件名;第三步填寫提交的信息(建議填寫);第四步填寫提交的詳細描述(可選);第五步選擇是否是一次重大的更改(可選);第六步是否影響某個open issue(可選)。整個過程如下圖:

image

我們也可以配置一個 script,示例代碼如下:

package.json

"scripts": {
  "commit": "cz"
},

待續。。。

更多可參考

從0開始搭建一個Vue3.x企業級項目骨架

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章