1
2
3
4
5
6
7
8

# 拉取代碼
git clone https://github.com/vbenjs/vue-vben-admin-doc

# 安裝依賴
yarn

# 運行項目
yarn dev

1
2
3
4
5
6
7
8

# 官網上的創建項目命令
yarn create @vitejs/app

# 名稱
vben-learn

# vue-ts的模板
√ vue-ts

1

git clone https://github.com/vbenjs/vue-vben-admin.git

1

git clone https://gitee.com/annsion/vue-vben-admin.git

1
2
3
4
5

// ...
"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
}
// ...

1

199.232.4.133   raw.githubusercontent.com

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// ...
"scripts": {
    # 安裝依賴
    "bootstrap": "yarn install",
    # 運行項目
    "serve": "npm run dev",
    # 運行項目
    "dev": "vite",
    # 構建項目
    "build": "vite build && esno ./build/script/postBuild.ts",
    # 清空緩存後構建項目
    "build:no-cache": "yarn clean:cache && npm run build",
    # 生成打包分析，在 `Mac OS` 電腦上執行完成後會自動打開界面，在 `Window` 電腦上執行完成後需要打開 `./build/.cache/stats.html` 查看
    "report": "cross-env REPORT=true npm run build",
    # 類型檢查
    "type:check": "vue-tsc --noEmit --skipLibCheck",
    # 預覽打包後的內容（先打包在進行預覽）
    "preview": "npm run build && vite preview",
    # 直接預覽本地 dist 文件目錄
    "preview:dist": "vite preview",
    # 生成 ChangeLog
    "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
    # 刪除緩存
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    # 刪除 node_modules (`window` 系統手動刪除該目錄較慢，可以使用該命令來進行刪除)
    "clean:lib": "rimraf node_modules",
    # 執行 eslint 校驗，並修復部分問題
    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
    # 執行 prettier 格式化（該命令會對項目所有代碼進行 prettier 格式化，請謹慎執行）
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
    # 執行 stylelint 格式化
    "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
    "lint:pretty": "pretty-quick --staged",
    # 對打包結果進行 gzip 測試
    "test:gzip": "http-server dist --cors --gzip -c-1",
    # 對打包目錄進行 brotli 測試
    "test:br": "http-server dist --cors --brotli -c-1",
    # 重新安裝依賴，見下方說明
    "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
    "install:husky": "is-ci || husky install",
    # 生成圖標集，見下方說明
    "gen:icon": "esno ./build/generate/icon/index.ts",
    "postinstall": "npm run install:husky"
},
// ...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.
├── build                               # 打包腳本相關
│   ├── config                          # 配置文件
│   ├── generate                        # 生成器
│   ├── script                          # 腳本
│   └── vite                            # vite配置
├── mock                                # mock文件夾
├── public                              # 公共靜態資源目錄
├── src                                 # 主目錄
│   ├── api                             # 接口文件
│   ├── assets                          # 資源文件
│   │   ├── icons                       # icon sprite 圖標文件夾
│   │   ├── images                      # 項目存放圖片的文件夾
│   │   └── svg                         # 項目存放svg圖片的文件夾
│   ├── components                      # 公共組件
│   ├── design                          # 樣式文件
│   ├── directives                      # 指令
│   ├── enums                           # 枚舉/常量
│   ├── hooks                           # hook
│   │   ├── component                   # 組件相關hook
│   │   ├── core                        # 基礎hook
│   │   ├── event                       # 事件相關hook
│   │   ├── setting                     # 配置相關hook
│   │   └── web                         # web相關hook
│   ├── layouts                         # 佈局文件
│   │   ├── default                     # 默認佈局
│   │   ├── iframe                      # iframe佈局
│   │   └── page                        # 頁面佈局
│   ├── locales                         # 多語言
│   ├── logics                          # 邏輯
│   ├── main.ts                         # 主入口
│   ├── router                          # 路由配置
│   ├── settings                        # 項目配置
│   │   ├── componentSetting.ts         # 組件配置
│   │   ├── designSetting.ts            # 樣式配置
│   │   ├── encryptionSetting.ts        # 加密配置
│   │   ├── localeSetting.ts            # 多語言配置
│   │   ├── projectSetting.ts           # 項目配置
│   │   └── siteSetting.ts              # 站點配置
│   ├── store                           # 數據倉庫
│   ├── utils                           # 工具類
│   └── views                           # 頁面
├── test                                # 測試
│   └── server                          # 測試用到的服務
│       ├── api                         # 測試服務器
│       ├── upload                      # 測試上傳服務器
│       └── websocket                   # 測試ws服務器
├── types                               # 類型文件
├── vite.config.ts                      # vite配置文件
└── windi.config.ts                     # windcss配置文件

1
2
3
4

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

1
2
3
4
5
6
7
8

# 運行的端口
VITE_PORT = 3100

# 應用名稱
VITE_GLOB_APP_TITLE = Vben Admin

# 應用短名稱
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 是否使用mock
VITE_USE_MOCK = true

# 公共路徑
VITE_PUBLIC_PATH = /

# 是否刪除所有日誌打印
VITE_DROP_CONSOLE = true

# 是否啟用gzip或brotli壓縮。
# 可選：gzip | brotli | none
# 如果你需要多個表格，你可以使用`,`來分隔。
VITE_BUILD_COMPRESS = 'none'

# 應用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上傳地址，可選
# 可以通過nginx轉發或直接寫入實際地址。
VITE_GLOB_UPLOAD_URL=/upload

# 接口前綴
VITE_GLOB_API_URL_PREFIX=

# 是否啟用圖像壓縮
VITE_USE_IMAGEMIN= true

#使用PWA
VITE_USE_PWA = false

# 是否與舊版瀏覽器兼容
VITE_LEGACY = false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

VITE_PORT = 3100

# 是否使用mock
VITE_USE_MOCK = true

# 公共路徑
VITE_PUBLIC_PATH = /

# 跨域代理，你可以配置多個代理。
VITE_PROXY=[["/api","http://localhost:3000"],["/upload","http://localhost:3001/upload"]]
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]

# 是否刪除所有日誌打印
VITE_DROP_CONSOLE = false

# 應用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上傳地址，可選
VITE_GLOB_UPLOAD_URL=/upload

# 接口前綴
VITE_GLOB_API_URL_PREFIX=

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<template>
  <div>{{ vitePort }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const vitePort = ref(import.meta.env.VITE_PORT);
    return {
      vitePort,
    };
  },
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

{
  "compilerOptions": {
    // ↓ 指定ECMAScript目標版本，esnext為最新版本
    "target": "esnext",

    // ↓ 指定生成哪個模塊系統代碼，esnext為最新版本
    "module": "esnext",

    // ↓ 決定如何處理模塊。
    "moduleResolution": "node",

    // ↓ 啟用所有嚴格類型檢查選項。
    "strict": true,

    // ↓ 禁止對同一個文件的不一致的引用。
    "forceConsistentCasingInFileNames": true,

    // ↓ 允許從沒有設置默認導出的模塊中默認導入。這並不影響代碼的輸出，僅為了類型檢查。
    "allowSyntheticDefaultImports": true,

    // ↓ 禁用函數參數雙向協變檢查。
    "strictFunctionTypes": false,

    // ↓ 在 .tsx文件裡支持JSX
    "jsx": "preserve",

    // ↓ 解析非相對模塊名的基準目錄。查看 模塊解析文檔了解詳情。
    "baseUrl": ".",

    // ↓ 允許編譯javascript文件。
    "allowJs": true,

    // ↓ 生成相應的 .map文件。
    "sourceMap": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,

    // ↓ 若有未使用的局部變量則拋錯。
    "noUnusedLocals": true,

    // ↓ 若有未使用的參數則拋錯。
    "noUnusedParameters": true,

    // ↓ 啟用實驗性的ES裝飾器。
    "experimentalDecorators": true,

    // ↓ 編譯過程中需要引入的庫文件的列表。
    "lib": ["dom", "esnext"],

    // ↓ 要包含的類型聲明文件名列表。
    "types": ["vite/client"],

    // ↓ 要包含的類型聲明文件路徑列表。
    "typeRoots": ["./node_modules/@types/", "./types"],
    "incremental": true,

    // ↓ 在表達式和聲明上有隱含的 any類型時報錯。
    "noImplicitAny": false,

    // ↓ 忽略所有的聲明文件（ *.d.ts）的類型檢查。
    "skipLibCheck": true,

    // ↓ 模塊名到基於 baseUrl的路徑映射的列表。查看 模塊解析文檔了解詳情。
    "paths": {
      "/@/*": ["src/*"],
      "/#/*": ["types/*"]
    }
  },

  // ↓ 指定一個匹配列表（屬於自動指定該路徑下的所有ts相關文件）
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "mock/**/*.ts"
  ],

  // ↓ 指定一個排除列表（include的反向操作）
  "exclude": ["node_modules", "dist", "**/*.js"]
}

1

yarn add eslint --dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

module.exports = {
  // ↓ 默認情況下，ESLint 會在所有父級目錄裡尋找配置文件，一直到根目錄。如果你想要你所有項目都遵循一個特定的約定時，這將會很有用，但有時候會導致意想不到的結果。為了將 ESLint 限製到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件裡的 eslintConfig 字段下設置 "root": true。 ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
  // ↓ 此項是用來告訴eslint找當前配置文件不能往父級查找
  root: true,

  // ↓ 指定你想啟用的環境
  env: {
    browser: true,
    node: true,
    es6: true,
  },

  // ↓ 設置解析器
  parser: "",

  // ↓ 解析器選項
  parserOptions: {},

  // ↓ 擴展項
  extends: [],

  // ↓ 自定義規則配置
  rules: {}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

1

yarn add eslint-plugin-vue vue-eslint-parser --dev

1
2
3
4
5
6
7
8
9

module.exports = {
    // ...
    parser: 'vue-eslint-parser',
    // ...
    extends: [
        'plugin:vue/vue3-recommended',
    ],
    // ...
}

1

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

module.exports = {
    // ...
    parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: 2020,
        sourceType: "module",
        jsxPragma: "React",
        ecmaFeatures: {
            jsx: true,
            tsx: true,
        },
    },
    extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended"],
    // ...
}

1

yarn add prettier eslint-plugin-prettier eslint-config-prettier --dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

module.exports = {
    printWidth: 100,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    vueIndentScriptAndStyle: true,
    singleQuote: true,
    quoteProps: 'as-needed',
    bracketSpacing: true,
    trailingComma: 'es5',
    jsxBracketSameLine: false,
    jsxSingleQuote: false,
    arrowParens: 'always',
    insertPragma: false,
    requirePragma: false,
    proseWrap: 'never',
    htmlWhitespaceSensitivity: 'strict',
    endOfLine: 'lf',
    rangeStart: 0
}

1
2
3
4
5
6
7
8
9

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

module.exports = {
    // ...
    extends: [
        "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier",
        "plugin:prettier/recommended",
    ],
    // ...
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100

module.exports = {
    // ...
    rules: {
        // ↓ 禁止使用@ts-ignore來消除ESLint檢查
        '@typescript-eslint/ban-ts-ignore': 'off',

        // ↓ 在函數和類方法上需要顯式的返回類型
        '@typescript-eslint/explicit-function-return-type': 'off',

        // ↓ 禁止使用any類型
        '@typescript-eslint/no-explicit-any': 'off',

        // ↓ 除導入語句外，禁止使用require語句
        '@typescript-eslint/no-var-requires': 'off',

        // ↓ 禁止使用空函數
        '@typescript-eslint/no-empty-function': 'off',

        // ↓ 對自定義事件名稱強制使用特定的大小寫
        'vue/custom-event-name-casing': 'off',

        // ↓ 禁止定義前使用
        'no-use-before-define': 'off',

        // ↓ 在定義變量之前不允許使用變量
        '@typescript-eslint/no-use-before-define': 'off',

        // ↓ 禁止使用@ts-註解
        '@typescript-eslint/ban-ts-comment': 'off',

        // ↓ 禁止使用特定類型
        '@typescript-eslint/ban-types': 'off',

        // ↓ 禁止使用!後綴運算符進行非null斷言
        '@typescript-eslint/no-non-null-assertion': 'off',

        // ↓ 在導出的函數和類的公共類方法上需要顯式的返回值和參數類型
        '@typescript-eslint/explicit-module-boundary-types': 'off',

        // ↓ 禁止使用未使用的變量
        '@typescript-eslint/no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$',
            },
        ],

        // ↓ 禁止使用未使用的變量
        'no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$',
            },
        ],

        // ↓ 在函數括號前需要或不允許有空格
        'space-before-function-paren': 'off',

        // ↓ 強制屬性順序
        'vue/attributes-order': 'off',

        // ↓ 強制每個組件應位於其自己的文件中
        'vue/one-component-per-file': 'off',

        // ↓ 在標籤的右括號之前要求或不允許換行
        'vue/html-closing-bracket-newline': 'off',

        // ↓ 強制每行的最大屬性數
        'vue/max-attributes-per-line': 'off',

        // ↓ 在多行元素的內容之前和之後需要換行
        'vue/multiline-html-element-content-newline': 'off',

        // ↓ 在單行元素的內容之前和之後需要換行
        'vue/singleline-html-element-content-newline': 'off',

        // ↓ 在模板中的自定義組件上實施屬性命名樣式
        'vue/attribute-hyphenation': 'off',

        // ↓ 需要道具的默認值
        'vue/require-default-prop': 'off',

        // ↓ 實施自我封閉的風格
        // 'vue/html-self-closing': 'off',
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'always',
                },
                svg: 'always',
                math: 'always'
            }
        ]
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

node_modules
.DS_Store
dist
dist-ssr
*.local

# other
.npmrc
.cache
test/upload-server/static

.local
# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

1

yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-order --dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module.exports = {
    // ↓ 這個好像是沒有用的，但是VbenAdmin是這麼寫的
    root: true,

    // ↓ 插件
    plugins: ['stylelint-order'],

    // ↓ 擴展
    extends: ['stylelint-config-standard', 'stylelint-config-prettier'],

    // ↓ 自定義規則
    rules: {},

    // ↓ 忽略檢查的文件
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

module.exports = {
    // ...
    rules: {
        // ↓ 禁止使用未知的偽類選擇器。
        'selector-pseudo-class-no-unknown': [
            true,
            {
                ignorePseudoClasses: ['global']
            }
        ],
        
        // ↓ 禁止使用未知規則。
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
            }
        ],
        
        // ↓ 禁止空來源。
        'no-empty-source': null,
        
        // ↓ 禁止使用無效的命名網格區域。
        'named-grid-areas-no-invalid': null,
        
        // ↓ 要求或不允許使用Unicode字節順序標記。
        'unicode-bom': 'never',
        
        // ↓ 禁止較低特異性的選擇器在覆蓋較高特異性的選擇器之後出現。
        'no-descending-specificity': null,
        
        // ↓ 禁止在字體系列名稱列表中缺少通用系列。
        'font-family-no-missing-generic-family-keyword': null,
        
        // ↓ 在聲明的冒號後面需要一個空格或禁止空格。
        'declaration-colon-space-after': 'always-single-line',
        
        // ↓ 在聲明的冒號之前需要一個空格或禁止使用空格。
        'declaration-colon-space-before': 'never',
        
        // ↓ 在聲明塊內要求或不允許尾隨分號。
        'declaration-block-trailing-semicolon': 'always',
        
        // ↓ 在規則之前要求或禁止使用空行。
        'rule-empty-line-before': [
            'always',
            {
                ignore: ['after-comment', 'first-nested'],
            }
        ],
        
        // ↓ 禁止使用未知單位。
        'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
        // Specify the alphabetical order of the attributes in the declaration block
        
        // ↓ 樣式順序
        'order/properties-order': [
            'position',
            'top',
            'right',
            'bottom',
            'left',
            'z-index',
            'display',
            'float',
            'width',
            'height',
            'max-width',
            'max-height',
            'min-width',
            'min-height',
            'padding',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left',
            'margin',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'margin-collapse',
            'margin-top-collapse',
            'margin-right-collapse',
            'margin-bottom-collapse',
            'margin-left-collapse',
            'overflow',
            'overflow-x',
            'overflow-y',
            'clip',
            'clear',
            'font',
            'font-family',
            'font-size',
            'font-smoothing',
            'osx-font-smoothing',
            'font-style',
            'font-weight',
            'hyphens',
            'src',
            'line-height',
            'letter-spacing',
            'word-spacing',
            'color',
            'text-align',
            'text-decoration',
            'text-indent',
            'text-overflow',
            'text-rendering',
            'text-size-adjust',
            'text-shadow',
            'text-transform',
            'word-break',
            'word-wrap',
            'white-space',
            'vertical-align',
            'list-style',
            'list-style-type',
            'list-style-position',
            'list-style-image',
            'pointer-events',
            'cursor',
            'background',
            'background-attachment',
            'background-color',
            'background-image',
            'background-position',
            'background-repeat',
            'background-size',
            'border',
            'border-collapse',
            'border-top',
            'border-right',
            'border-bottom',
            'border-left',
            'border-color',
            'border-image',
            'border-top-color',
            'border-right-color',
            'border-bottom-color',
            'border-left-color',
            'border-spacing',
            'border-style',
            'border-top-style',
            'border-right-style',
            'border-bottom-style',
            'border-left-style',
            'border-width',
            'border-top-width',
            'border-right-width',
            'border-bottom-width',
            'border-left-width',
            'border-radius',
            'border-top-right-radius',
            'border-bottom-right-radius',
            'border-bottom-left-radius',
            'border-top-left-radius',
            'border-radius-topright',
            'border-radius-bottomright',
            'border-radius-bottomleft',
            'border-radius-topleft',
            'content',
            'quotes',
            'outline',
            'outline-offset',
            'opacity',
            'filter',
            'visibility',
            'size',
            'zoom',
            'transform',
            'box-align',
            'box-flex',
            'box-orient',
            'box-pack',
            'box-shadow',
            'box-sizing',
            'table-layout',
            'animation',
            'animation-delay',
            'animation-duration',
            'animation-iteration-count',
            'animation-name',
            'animation-play-state',
            'animation-timing-function',
            'animation-fill-mode',
            'transition',
            'transition-delay',
            'transition-duration',
            'transition-property',
            'transition-timing-function',
            'background-clip',
            'backface-visibility',
            'resize',
            'appearance',
            'user-select',
            'interpolation-mode',
            'direction',
            'marks',
            'page',
            'set-link-source',
            'unicode-bidi',
            'speak'
        ]
    }
    // ...
}

1
2

/dist/*
/public/*

1

yarn autoclean --init

1

yarn add postcss autoprefixer --dev

1
2
3
4
5

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

1
2
3

yarn bootstrap
# or
# npm run bootstrap

1
2
3
4
5

"scripts": {
    // ...
    "bootstrap": "yarn install",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "serve": "npx --max_old_space_size=4096 vite",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "dev": "npx --max_old_space_size=4096 vite",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "build": "vite build",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "build:no-cache": "yarn clean:cache && npm run build",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "preview": "npm run build && vite preview",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "preview:dist": "vite preview",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:ls-lint": "ls-lint",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "lint:pretty": "pretty-quick --staged",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "install:husky": "is-ci || husky install",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "postinstall": "npm run install:husky",
    // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{
    // ...
    "scripts": {
        "bootstrap": "yarn install",
        "serve": "npx --max_old_space_size=4096 vite",
        "dev": "npx --max_old_space_size=4096 vite",
        "build": "vite build",
        "build:no-cache": "yarn clean:cache && npm run build",
        "report": "yarn -v",
        "preview": "npm run build && vite preview",
        "preview:dist": "vite preview",
        "log": "yarn -v",
        "clean:cache": "yarn -v",
        "clean:lib": "yarn -v",
        "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
        "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
        "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
        "lint:ls-lint": "ls-lint",
        "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
        "lint:pretty": "pretty-quick --staged",
        "test:gzip": "yarn -v",
        "test:br": "yarn -v",
        "reinstall": "yarn -v",
        "install:husky": "is-ci || husky install",
        "gen:icon": "yarn -v",
        "postinstall": "npm run install:husky"
    },
    // ...
}

1

yarn add rimraf --dev

1
2
3
4
5

"scripts": {
    // ...
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "clean:lib": "rimraf node_modules",
    // ...
}

1
2
3
4
5

"scripts": {
    // ...
    "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
    // ...
}

1

yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional pretty-quick is-ci --dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

module.exports = {
    // ↓ 忽略包含init的提交消息
    ignores: [(commit) => commit.includes('init')],
    
    // ↓ 按照传统消息格式来验证
    extends: ['@commitlint/config-conventional'],
    
    // ↓ 这里是自定义解析器，看不太懂，直接搬代码吧
    // ↓ https://commitlint.js.org/#/reference-configuration?id=parser-presets
    parserPreset: {
        parserOpts: {
            headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
            headerCorrespondence: ['type', 'scope', 'subject'],
            referenceActions: [
                'close',
                'closes',
                'closed',
                'fix',
                'fixes',
                'fixed',
                'resolve',
                'resolves',
                'resolved'
            ],
            issuePrefixes: ['#'],
            noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
            fieldPattern: /^-(.*?)-$/,
            revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
            revertCorrespondence: ['header', 'hash'],
            warn() {},
            mergePattern: null,
            mergeCorrespondence: null
        }
    },
    
    // ↓ 自定义提交消息规则
    rules: {
        // ↓ body以空白行开头
        'body-leading-blank': [2, 'always'],
        
        // ↓ footer以空白行开头
        'footer-leading-blank': [1, 'always'],
        
        // ↓ header的最大长度
        'header-max-length': [2, 'always', 108],
        
        // ↓ subject为空
        'subject-empty': [2, 'never'],
        
        // ↓ type为空
        'type-empty': [2, 'never'],
        
        // ↓ type的类型
        'type-enum': [
            2,
            'always',
            [
                'feat',
                'fix',
                'perf',
                'style',
                'docs',
                'test',
                'refactor',
                'build',
                'ci',
                'chore',
                'revert',
                'wip',
                'workflow',
                'types'
            ]
        ]
    }
};

1

npx husky install

1
2
3
4
5
6
7
8

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi

1
2
3
4
5

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

yarn ...

1
2
3

"scripts": {
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js"
}

1
2
3

"scripts": {
    "lint:pretty": "pretty-quick --staged"
}

1
2
3

"scripts": {
    "install:husky": "is-ci || husky install"
}

1
2
3

"scripts": {
    "postinstall": "npm run install:husky"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 啟動husky
yarn install:husky

# 添加commit消息檢查任務到`.husky/commit-msg`文件中
# 這裡我一直執行不出來，是引號引其的問題，大家可以先創建空的然後把命令複製進去
# npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/commit-msg

# 創建一個任務文件
npx husky add .husky/pre-commit

1
2
3
4

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

npx --no-install commitlint --edit "$1"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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

[ -n "$CI" ] && exit 0

# Check the file name
# ! ls-lint cannot be used normally in mac pro of M1 system.
npm run lint:ls-lint

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

npm run lint:pretty

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

git add .
git commit -m "隨便打一些消息"

> [email protected] lint:ls-lint F:\CodeLearn\vben\vben3
> ls-lint

> [email protected] lint:lint-staged F:\CodeLearn\vben\vben3
> lint-staged -c ./.husky/lintstagedrc.js

[STARTED] Preparing...
# 一系列檢查...
[SUCCESS] Cleaning up...

> [email protected] lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

�🔍  Finding changed files since git revision 1346762.
�🎯  Found 2 changed files.
✅  Everything is awesome!
⧗   input: 隨便打一些消息
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

git commit -m "feat: 我們成功的規範了Git提交!"

> [email protected] lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

 �🔍  Finding changed files since git revision 1346762.
 �🎯  Found 2 changed files.
✅  Everything is awesome!
[master 6c61fc5] feat: 我們成功的規範了Git提交!
 7 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 .husky/.gitignore
 create mode 100644 .husky/commit-msg
 create mode 100644 .husky/common.sh
 create mode 100644 .husky/lintstagedrc.js
 create mode 100644 .husky/pre-commit
 
# 推送出去
git push -u origin master

1

yarn add global conventional-changelog-cli --dev

1
2
3
4
5

"scripts": {
    // ...
    "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
    // ...
}

1

yarn log

1
2
3
4
5
6

# 0.0.0 (2022-10-13)

### Features

- 我们成功的规范了 Git 提交! ([6c61fc5](https://gitee.com/kuxiaoxin/vben3/commits/6c61fc5c0bc9d0ed551117eb00349ce82e35deea))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

> conventional-changelog --help

Generate a changelog from git metadata

  Usage
    conventional-changelog

  Example
    conventional-changelog -i CHANGELOG.md --same-file

  Options
    -i, --infile              Read the CHANGELOG from this file
                              # 從這個文件中讀取CHANGELOG。

    -o, --outfile             Write the CHANGELOG to this file
                              If unspecified, it prints to stdout
                              # 將CHANGELOG寫入這個文件。
                              # 如果沒有指定，則打印到stdout。

    -s, --same-file           Outputting to the infile so you don\'t need to specify the same file as outfile
                              # 輸出到infile，所以你不需要指定與outfile相同的文件。

    -p, --preset              Name of the preset you want to use. Must be one of the following:
                              angular, atom, codemirror, ember, eslint, express, jquery, jscs or jshint
                              # 您要使用的預設名稱。必須是下列之一。
                              # angular, atom, codemirror,
                              # ember, eslint, express,
                              # jquery, jscs, jshint。

    -k, --pkg                 A filepath of where your package.json is located
                              Default is the closest package.json from cwd
                              # 您的 package.json 所在的文件路徑。
                              # 默認為cwd中最接近的package.json。

    -a, --append              Should the newer release be appended to the older release
                              Default: \false
                              # 是否應將較新的版本附加到較舊的版本上？
                              # 默認：不追加

    -r, --release-count       How many releases to be generated from the latest
                              If 0, the whole changelog will be regenerated and the outfile will be overwritten
                              Default: 1
                              # 將從最新的版本中生成多少個版本。
                              # 如果為0，整個變更日誌將被重新生成，並且輸出文件將被覆蓋。
                              # 默認值: 1

    --skip-unstable           If given, unstable tags will be skipped, e.g., x.x.x-alpha.1, x.x.x-rc.2
                              # 如果給定，將跳過不穩定的標籤，例如，x.x.x-alpha.1, x.x.x-rc.2。

    -u, --output-unreleased   Output unreleased changelog
                              # 輸出未發布的變更日誌。

    -v, --verbose             Verbose output. Use this \for debugging
                              Default: \false
                              # Verbose 輸出。用來調試
                              # 默認：不輸出

    -n, --config              A filepath of your config script
                              Example of a config script: https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-cli/test/fixtures/config.js
                              # 配置腳本的文件路徑。
                              # 配置腳本的例子：
                              # https://github.com/conventional-changelog
                              # /conventional-changelog/blob/master/packages
                              # /conventional-changelog-cli/test/fixtures/config.js

    -c, --context             A filepath of a json that is used to define template variables
                              # 一個用於定義模板變量的json文件路徑。
    -l, --lerna-package       Generate a changelog \for a specific lerna package (:[email protected])
                              # 為一個特定的lerna包生成一個變更日誌(:[email protected])
    -t, --tag-prefix          Tag prefix to consider when reading the tags
                              # 讀取標籤時要考慮的標籤前綴。
    --commit-path             Generate a changelog scoped to a specific directory
                              # 生成一個特定目錄下的變更日誌。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105

import type { UserConfig, ConfigEnv } from 'vite';

import { loadEnv } from 'vite';
import { resolve } from 'path';

// import { generateModifyVars } from './build/config/themeConfig';
// import { createProxy } from './build/vite/proxy';
// import { wrapperEnv } from './build/utils';
// import { createVitePlugins } from './build/vite/plugin';
// import { OUTPUT_DIR } from './build/constant';

function pathResolve(dir: string) {
  return resolve(__dirname, '.', dir);
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()

  const env = loadEnv(mode, root)

  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  // const viteEnv = wrapperEnv(env);

  // const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;

  // const isBuild = command === 'build';

  return {
    // base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: [
        {
          // /@/xxxx  =>  src/xxx
          find: /^\/@\//,
          replacement: pathResolve('src') + '/'
        },
        {
          // /#/xxxx  =>  types/xxx
          find: /^\/#\//,
          replacement: pathResolve('types') + '/'
        }
      ]
    },
    server: {
      // port: VITE_PORT,
      // Load proxy configuration from .env
      // proxy: createProxy(VITE_PROXY),
      hmr: {
        overlay: true
      }
    },

    build: {
      // minify: 'esbuild',
      // outDir: OUTPUT_DIR,
      // polyfillDynamicImport: VITE_LEGACY,
      terserOptions: {
        compress: {
          keep_infinity: true,
          // Used to delete console in production environment
          // drop_console: VITE_DROP_CONSOLE,
        },
      },
      // Turning off brotliSize display can slightly reduce packaging time
      brotliSize: false,
      chunkSizeWarningLimit: 1200
    },
    define: {
      // setting vue-i18-next
      // Suppress warning
      __VUE_I18N_LEGACY_API__: false,
      __VUE_I18N_FULL_INSTALL__: false,
      __INTLIFY_PROD_DEVTOOLS__: false
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // Used for global import to avoid the need to import each style file separately
            // reference:  Avoid repeated references
            hack: `true; @import (reference) "${resolve('src/design/config.less')}";`
            // ...generateModifyVars(),
          },
          javascriptEnabled: true
        }
      }
    },

    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    // plugins: createVitePlugins(viteEnv, isBuild),

    optimizeDeps: {
      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
      include: [
        '@iconify/iconify',
        'ant-design-vue/es/locale/zh_CN',
        'moment/dist/locale/zh-cn',
        'ant-design-vue/es/locale/en_US',
        'moment/dist/locale/eu',
      ],
      exclude: ['vue-demi']
    }
  }
}