├── .husky
    ├── .gitignore
    └── pre-commit
├── src
    ├── assets
    │   ├── style
    │   │   └── main.scss
    │   └── logo.png
    ├── vite-env.d.ts
    ├── service
    │   ├── api
    │   │   └── login
    │   │   │   ├── types.ts
    │   │   │   └── login.ts
    │   └── http.ts
    ├── App.vue
    ├── shims-vue.d.ts
    ├── main.ts
    ├── router
    │   └── index.ts
    ├── store
    │   └── main.ts
    └── pages
    │   └── login
    │       └── Login.vue
├── .prettierignore
├── .eslintignore
├── .gitignore
├── public
    └── favicon.ico
├── .prettierrc.js
├── index.html
├── tsconfig.json
├── vite.config.ts
├── package.json
├── .eslintrc.js
└── README.md


/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/src/assets/style/main.scss:
--------------------------------------------------------------------------------
1 | $test-color: red;


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # 忽略格式化文件 (根据项目需要自行添加)
2 | node_modules
3 | dist
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # eslint 忽略检查 (根据项目需要自行添加)
2 | node_modules
3 | dist
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xushanpei/vite_vue3_ts/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xushanpei/vite_vue3_ts/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | npx lint-staged
6 | 


--------------------------------------------------------------------------------
/src/service/api/login/types.ts:
--------------------------------------------------------------------------------
1 | export interface ILoginParams {
2 |   userName: string
3 |   passWord: string | number
4 | }
5 | export interface ILoginApi {
6 |   login: (params: ILoginParams) => Promise<any>
7 | }
8 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent } from 'vue'
 7 | 
 8 | export default defineComponent({
 9 |   name: 'App',
10 | })
11 | </script>
12 | 
13 | <style></style>
14 | 


--------------------------------------------------------------------------------
/src/service/api/login/login.ts:
--------------------------------------------------------------------------------
 1 | //login.ts
 2 | import http from '@/service/http'
 3 | import * as T from './types'
 4 | 
 5 | const loginApi: T.ILoginApi = {
 6 |   login(params) {
 7 |     return http.post('/login', params)
 8 |   },
 9 | }
10 | 
11 | export default loginApi
12 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue'
3 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router/index'
 4 | import { createPinia } from 'pinia'
 5 | 
 6 | const app = createApp(App)
 7 | 
 8 | app.use(router)
 9 | 
10 | app.use(createPinia())
11 | 
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   tabWidth: 2,
 3 |   jsxSingleQuote: true,
 4 |   jsxBracketSameLine: true,
 5 |   printWidth: 100,
 6 |   singleQuote: true,
 7 |   semi: false,
 8 |   overrides: [
 9 |     {
10 |       files: '*.json',
11 |       options: {
12 |         printWidth: 200,
13 |       },
14 |     },
15 |   ],
16 |   arrowParens: 'always',
17 | }
18 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 2 | 
 3 | const routes: RouteRecordRaw[] = [
 4 |   {
 5 |     path: '/',
 6 |     name: 'Login',
 7 |     component: () => import('@/pages/login/Login.vue'),
 8 |   },
 9 | ]
10 | 
11 | const router = createRouter({
12 |   history: createWebHistory(),
13 |   routes,
14 | })
15 | 
16 | export default router
17 | 


--------------------------------------------------------------------------------
/src/store/main.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useMainStore = defineStore({
 4 |   id: 'main',
 5 |   state: () => ({
 6 |     name: '超级管理员',
 7 |   }),
 8 |   getters: {
 9 |     nameLength: (state) => state.name.length,
10 |   },
11 |   actions: {
12 |     async insertPost(data: string) {
13 |       // 可以做异步
14 |       // await doAjaxRequest(data);
15 |       this.name = data
16 |     },
17 |   },
18 | })
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "sourceMap": true,
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "lib": ["esnext", "dom"],
12 |     "baseUrl": ".",
13 |     "paths": {
14 |       "@/*":["src/*"]
15 |     }
16 |   },
17 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/pages/login/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="test">用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
 3 |   <hr />
 4 |   <button @click="updateName">修改store中的name</button>
 5 |   <hr />
 6 | 
 7 |   <n-button>naive-ui</n-button>
 8 | </template>
 9 | 
10 | <script setup lang="ts">
11 | import { useMainStore } from '@/store/main'
12 | import { NButton } from 'naive-ui'
13 | 
14 | const mainStore = useMainStore()
15 | 
16 | const updateName = () => {
17 |   mainStore.$patch({
18 |     name: '名称被修改了,nameLength也随之改变了',
19 |   })
20 | }
21 | </script>
22 | 
23 | <style lang="scss" scoped>
24 | .test {
25 |   color: $test-color;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import path from 'path'
 4 | //@ts-ignore
 5 | import viteCompression from 'vite-plugin-compression'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   base: './', //打包路径
10 |   plugins: [
11 |     vue(),
12 |     // gzip压缩 生产环境生成 .gz 文件
13 |     viteCompression({
14 |       verbose: true,
15 |       disable: false,
16 |       threshold: 10240,
17 |       algorithm: 'gzip',
18 |       ext: '.gz',
19 |     }),
20 |   ],
21 |   // 配置别名
22 |   resolve: {
23 |     alias: {
24 |       '@': path.resolve(__dirname, 'src'),
25 |     },
26 |   },
27 |   css: {
28 |     preprocessorOptions: {
29 |       scss: {
30 |         additionalData: '@import "@/assets/style/main.scss";',
31 |       },
32 |     },
33 |   },
34 |   //启动服务配置
35 |   server: {
36 |     host: '0.0.0.0',
37 |     port: 8000,
38 |     open: true,
39 |     https: false,
40 |     proxy: {},
41 |   },
42 |   // 生产环境打包配置
43 |   //去除 console debugger
44 |   build: {
45 |     terserOptions: {
46 |       compress: {
47 |         drop_console: true,
48 |         drop_debugger: true,
49 |       },
50 |     },
51 |   },
52 | })
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.0.0",
 3 |   "license": "ISC",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build:dev": "vite build --mode development",
 7 |     "build:pro": "vite build --mode production",
 8 |     "serve": "vite preview",
 9 |     "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
10 |     "prettier": "prettier --write .",
11 |     "prepare": "husky install"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.24.0",
15 |     "naive-ui": "^2.21.2",
16 |     "nprogress": "^0.2.0",
17 |     "pinia": "^2.0.0-rc.10",
18 |     "vfonts": "^0.1.0",
19 |     "vue": "^3.2.2",
20 |     "vue-router": "4"
21 |   },
22 |   "devDependencies": {
23 |     "@babel/types": "^7.16.0",
24 |     "@types/node": "^16.11.10",
25 |     "@types/nprogress": "^0.2.0",
26 |     "@typescript-eslint/eslint-plugin": "^5.4.0",
27 |     "@typescript-eslint/parser": "^5.4.0",
28 |     "@vitejs/plugin-vue": "^1.2.5",
29 |     "@vue/compiler-sfc": "^3.0.5",
30 |     "autoprefixer": "^10.4.0",
31 |     "dart-sass": "^1.25.0",
32 |     "eslint": "^8.3.0",
33 |     "eslint-config-prettier": "^8.3.0",
34 |     "eslint-plugin-prettier": "^4.0.0",
35 |     "eslint-plugin-vue": "^8.1.1",
36 |     "husky": "^7.0.4",
37 |     "lint-staged": "^12.1.2",
38 |     "mrm": "^3.0.10",
39 |     "postcss": "^8.4.4",
40 |     "prettier": "^2.4.1",
41 |     "sass": "^1.44.0",
42 |     "typescript": "^4.5.2",
43 |     "vite": "^2.4.2",
44 |     "vite-plugin-compression": "^0.3.6",
45 |     "vite-plugin-eslint": "^1.3.0",
46 |     "vue-tsc": "^0.0.24"
47 |   },
48 |   "husky": {
49 |     "hooks": {
50 |       "pre-commit": "lint-staged"
51 |     }
52 |   },
53 |   "lint-staged": {
54 |     "*.{js,jsx,vue,ts,tsx}": [
55 |       "yarn lint",
56 |       "prettier --write",
57 |       "git add"
58 |     ]
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/service/http.ts:
--------------------------------------------------------------------------------
  1 | //http.ts
  2 | import axios, { AxiosRequestConfig } from 'axios'
  3 | import NProgress from 'nprogress'
  4 | 
  5 | // 设置请求头和请求路径
  6 | axios.defaults.baseURL = '/api'
  7 | axios.defaults.timeout = 10000
  8 | axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
  9 | axios.interceptors.request.use(
 10 |   (config): AxiosRequestConfig<any> => {
 11 |     const token = window.sessionStorage.getItem('token')
 12 |     if (token) {
 13 |       //@ts-ignore
 14 |       config.headers.token = token
 15 |     }
 16 |     return config
 17 |   },
 18 |   (error) => {
 19 |     return error
 20 |   }
 21 | )
 22 | // 响应拦截
 23 | axios.interceptors.response.use((res) => {
 24 |   if (res.data.code === 111) {
 25 |     sessionStorage.setItem('token', '')
 26 |     // token过期操作
 27 |   }
 28 |   return res
 29 | })
 30 | 
 31 | interface ResType<T> {
 32 |   code: number
 33 |   data?: T
 34 |   msg: string
 35 |   err?: string
 36 | }
 37 | interface Http {
 38 |   get<T>(url: string, params?: unknown): Promise<ResType<T>>
 39 |   post<T>(url: string, params?: unknown): Promise<ResType<T>>
 40 |   upload<T>(url: string, params: unknown): Promise<ResType<T>>
 41 |   download(url: string): void
 42 | }
 43 | 
 44 | const http: Http = {
 45 |   get(url, params) {
 46 |     return new Promise((resolve, reject) => {
 47 |       NProgress.start()
 48 |       axios
 49 |         .get(url, { params })
 50 |         .then((res) => {
 51 |           NProgress.done()
 52 |           resolve(res.data)
 53 |         })
 54 |         .catch((err) => {
 55 |           NProgress.done()
 56 |           reject(err.data)
 57 |         })
 58 |     })
 59 |   },
 60 |   post(url, params) {
 61 |     return new Promise((resolve, reject) => {
 62 |       NProgress.start()
 63 |       axios
 64 |         .post(url, JSON.stringify(params))
 65 |         .then((res) => {
 66 |           NProgress.done()
 67 |           resolve(res.data)
 68 |         })
 69 |         .catch((err) => {
 70 |           NProgress.done()
 71 |           reject(err.data)
 72 |         })
 73 |     })
 74 |   },
 75 |   upload(url, file) {
 76 |     return new Promise((resolve, reject) => {
 77 |       NProgress.start()
 78 |       axios
 79 |         .post(url, file, {
 80 |           headers: { 'Content-Type': 'multipart/form-data' },
 81 |         })
 82 |         .then((res) => {
 83 |           NProgress.done()
 84 |           resolve(res.data)
 85 |         })
 86 |         .catch((err) => {
 87 |           NProgress.done()
 88 |           reject(err.data)
 89 |         })
 90 |     })
 91 |   },
 92 |   download(url) {
 93 |     const iframe = document.createElement('iframe')
 94 |     iframe.style.display = 'none'
 95 |     iframe.src = url
 96 |     iframe.onload = function () {
 97 |       document.body.removeChild(iframe)
 98 |     }
 99 |     document.body.appendChild(iframe)
100 |   },
101 | }
102 | export default http
103 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   root: true,
  3 |   env: {
  4 |     browser: true,
  5 |     node: true,
  6 |     es2021: true,
  7 |   },
  8 |   parser: 'vue-eslint-parser',
  9 |   extends: [
 10 |     'eslint:recommended',
 11 |     'plugin:vue/vue3-recommended',
 12 |     'plugin:@typescript-eslint/recommended',
 13 |     'plugin:prettier/recommended',
 14 |     // eslint-config-prettier 的缩写
 15 |     'prettier',
 16 |   ],
 17 |   parserOptions: {
 18 |     ecmaVersion: 12,
 19 |     parser: '@typescript-eslint/parser',
 20 |     sourceType: 'module',
 21 |     ecmaFeatures: {
 22 |       jsx: true,
 23 |     },
 24 |   },
 25 |   // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
 26 |   plugins: ['vue', '@typescript-eslint', 'prettier'],
 27 |   rules: {
 28 |     '@typescript-eslint/ban-ts-ignore': 'off',
 29 |     '@typescript-eslint/no-unused-vars': 'off',
 30 |     '@typescript-eslint/explicit-function-return-type': 'off',
 31 |     '@typescript-eslint/no-explicit-any': 'off',
 32 |     '@typescript-eslint/no-var-requires': 'off',
 33 |     '@typescript-eslint/no-empty-function': 'off',
 34 |     '@typescript-eslint/no-use-before-define': 'off',
 35 |     '@typescript-eslint/ban-ts-comment': 'off',
 36 |     '@typescript-eslint/ban-types': 'off',
 37 |     '@typescript-eslint/no-non-null-assertion': 'off',
 38 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
 39 |     'no-var': 'error',
 40 |     'prettier/prettier': 'error',
 41 |     // 禁止出现console
 42 |     'no-console': 'warn',
 43 |     // 禁用debugger
 44 |     'no-debugger': 'warn',
 45 |     // 禁止出现重复的 case 标签
 46 |     'no-duplicate-case': 'warn',
 47 |     // 禁止出现空语句块
 48 |     'no-empty': 'warn',
 49 |     // 禁止不必要的括号
 50 |     'no-extra-parens': 'off',
 51 |     // 禁止对 function 声明重新赋值
 52 |     'no-func-assign': 'warn',
 53 |     // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
 54 |     'no-unreachable': 'warn',
 55 |     // 强制所有控制语句使用一致的括号风格
 56 |     curly: 'warn',
 57 |     // 要求 switch 语句中有 default 分支
 58 |     'default-case': 'warn',
 59 |     // 强制尽可能地使用点号
 60 |     'dot-notation': 'warn',
 61 |     // 要求使用 === 和 !==
 62 |     eqeqeq: 'warn',
 63 |     // 禁止 if 语句中 return 语句之后有 else 块
 64 |     'no-else-return': 'warn',
 65 |     // 禁止出现空函数
 66 |     'no-empty-function': 'warn',
 67 |     // 禁用不必要的嵌套块
 68 |     'no-lone-blocks': 'warn',
 69 |     // 禁止使用多个空格
 70 |     'no-multi-spaces': 'warn',
 71 |     // 禁止多次声明同一变量
 72 |     'no-redeclare': 'warn',
 73 |     // 禁止在 return 语句中使用赋值语句
 74 |     'no-return-assign': 'warn',
 75 |     // 禁用不必要的 return await
 76 |     'no-return-await': 'warn',
 77 |     // 禁止自我赋值
 78 |     'no-self-assign': 'warn',
 79 |     // 禁止自身比较
 80 |     'no-self-compare': 'warn',
 81 |     // 禁止不必要的 catch 子句
 82 |     'no-useless-catch': 'warn',
 83 |     // 禁止多余的 return 语句
 84 |     'no-useless-return': 'warn',
 85 |     // 禁止变量声明与外层作用域的变量同名
 86 |     'no-shadow': 'off',
 87 |     // 允许delete变量
 88 |     'no-delete-var': 'off',
 89 |     // 强制数组方括号中使用一致的空格
 90 |     'array-bracket-spacing': 'warn',
 91 |     // 强制在代码块中使用一致的大括号风格
 92 |     'brace-style': 'warn',
 93 |     // 强制使用骆驼拼写法命名约定
 94 |     camelcase: 'warn',
 95 |     // 强制使用一致的缩进
 96 |     indent: 'off',
 97 |     // 强制在 JSX 属性中一致地使用双引号或单引号
 98 |     // 'jsx-quotes': 'warn',
 99 |     // 强制可嵌套的块的最大深度4
100 |     'max-depth': 'warn',
101 |     // 强制最大行数 300
102 |     // "max-lines": ["warn", { "max": 1200 }],
103 |     // 强制函数最大代码行数 50
104 |     // 'max-lines-per-function': ['warn', { max: 70 }],
105 |     // 强制函数块最多允许的的语句数量20
106 |     'max-statements': ['warn', 100],
107 |     // 强制回调函数最大嵌套深度
108 |     'max-nested-callbacks': ['warn', 3],
109 |     // 强制函数定义中最多允许的参数数量
110 |     'max-params': ['warn', 3],
111 |     // 强制每一行中所允许的最大语句数量
112 |     'max-statements-per-line': ['warn', { max: 1 }],
113 |     // 要求方法链中每个调用都有一个换行符
114 |     'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
115 |     // 禁止 if 作为唯一的语句出现在 else 语句中
116 |     'no-lonely-if': 'warn',
117 |     // 禁止空格和 tab 的混合缩进
118 |     'no-mixed-spaces-and-tabs': 'warn',
119 |     // 禁止出现多行空行
120 |     'no-multiple-empty-lines': 'warn',
121 |     // 禁止出现;
122 |     semi: ['warn', 'never'],
123 |     // 强制在块之前使用一致的空格
124 |     'space-before-blocks': 'warn',
125 |     // 强制在 function的左括号之前使用一致的空格
126 |     // 'space-before-function-paren': ['warn', 'never'],
127 |     // 强制在圆括号内使用一致的空格
128 |     'space-in-parens': 'warn',
129 |     // 要求操作符周围有空格
130 |     'space-infix-ops': 'warn',
131 |     // 强制在一元操作符前后使用一致的空格
132 |     'space-unary-ops': 'warn',
133 |     // 强制在注释中 // 或 /* 使用一致的空格
134 |     // "spaced-comment": "warn",
135 |     // 强制在 switch 的冒号左右有空格
136 |     'switch-colon-spacing': 'warn',
137 |     // 强制箭头函数的箭头前后使用一致的空格
138 |     'arrow-spacing': 'warn',
139 |     'prefer-const': 'warn',
140 |     'prefer-rest-params': 'warn',
141 |     'no-useless-escape': 'warn',
142 |     'no-irregular-whitespace': 'warn',
143 |     'no-prototype-builtins': 'warn',
144 |     'no-fallthrough': 'warn',
145 |     'no-extra-boolean-cast': 'warn',
146 |     'no-case-declarations': 'warn',
147 |     'no-async-promise-executor': 'warn',
148 |   },
149 |   globals: {
150 |     defineProps: 'readonly',
151 |     defineEmits: 'readonly',
152 |     defineExpose: 'readonly',
153 |     withDefaults: 'readonly',
154 |   },
155 | }
156 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | > 哈喽,大家好 我是`xy`👨🏻‍💻。 从我最初接触`vue3`版本到现在已经有一年的时间。由于 vue3.2 版本的发布，`<script setup>` 的实验性标志已经去掉，已经陆陆续续有不少公司开始使用 `vue3.2`开发项目了。这篇文章就来帮助大家如何快速使用 `vue3.x`，`typeScript`， `vite` 搭建一套企业级的开发脚手架 🤖。废话不多说，直接上手开搞 💪
   2 | 
   3 | ## 搭建前准备
   4 | 
   5 | 1. `Vscode`: 前端人必备写码神器
   6 | 2. `Chrome`：对开发者非常友好的浏览器(反正我是很依赖它的)
   7 | 3. `Nodejs`&`npm`：配置本地开发环境，安装 Node 后你会发现 npm 也会一起安装下来
   8 | 4. `Vue.js devtools`：浏览器调试插件
   9 | 5. `Vue Language Features (Volar)`：Vscode 开发 vue3 必备插件，提供语法高亮提示，非常好用
  10 | 6. `Vue 3 Snippets`：vue3 快捷输入
  11 | 
  12 | > 由于`Vue.js devtools` 需要到谷歌扩展商店才能下载,贴心 ❤️ 的`xy`已经为大家准备好了`crx`文件了,公众号回复:【`VueDevTools`】可自动获取哦 💪
  13 | 
  14 | ## Vue2 与 Vue3 的区别
  15 | 
  16 | `Vue3`由于完全由`TS`进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（`interface`）来进行类型定义。要不然在 ESLint 时都会报错。
  17 | 
  18 | `vue2` 的双向数据绑定是利用 `ES5` 的一个 `API Object.definePropert()`对数据进行劫持 结合 `发布订阅`模式的方式来实现的。`Vue3` 中使用了 `es6` 的 `ProxyAPI` 对数据代理。
  19 | 
  20 | `Vue3`支持碎片(`Fragments`)
  21 | 
  22 | Vue2 与 Vue3 最大的区别: Vue2 使用`Options API`而 Vue3 使用的`Composition API`
  23 | 
  24 | 生命周期钩子变化:
  25 | 
  26 | ```js
  27 | Vue2 ~~~~~~~~~~~ vue3
  28 | beforeCreate  -> setup()
  29 | created       -> setup()
  30 | beforeMount   -> onBeforeMount
  31 | mounted       -> onMounted
  32 | beforeUpdate  -> onBeforeUpdate
  33 | updated       -> onUpdated
  34 | beforeDestroy -> onBeforeUnmount
  35 | destroyed     -> onUnmounted
  36 | activated     -> onActivated
  37 | deactivated   -> onDeactivated
  38 | ```
  39 | 
  40 | ## 介绍 vite
  41 | 
  42 | > Vite：下一代前端开发与构建工具
  43 | 
  44 | - 💡 极速的开发服务器启动
  45 | - ⚡️ 轻量快速的热模块重载（HMR）
  46 | - 🛠️ 丰富的功能
  47 | - 📦 自带优化的构建
  48 | - 🔩 通用的插件接口
  49 | - 🔑 完全类型化的 API
  50 | 
  51 | `Vite` （法语意为 “迅速”，发音 /vit/）是一种全新的前端构建工具，它极大地改善了前端开发体验。
  52 | 
  53 | 它主要由两部分组成：
  54 | 
  55 | - 一个开发服务器，它基于 原生 `ES` 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  56 | 
  57 | - 一套构建指令，它使用 `Rollup` 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
  58 | 
  59 | - Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的`可扩展性`，并有完整的类型支持。
  60 | 
  61 | ## 使用 vite 快速创建脚手架
  62 | 
  63 | > 兼容性注意:Vite 需要 `Node.js` 版本 `>= 12.0.0`。
  64 | 
  65 | 1. 第一步: 在需要创建项目文件目录下打开 `cmd` 运行以下命令
  66 | 
  67 | ```bash
  68 | # npm 6.x
  69 | npm init @vitejs/app vite_vue3_ts --template
  70 | 
  71 | # npm 7+, 需要额外的双横线：
  72 | npm init @vitejs/app vite_vue3_ts -- --template
  73 | 
  74 | # yarn
  75 | yarn create @vitejs/app vite_vue3_ts --template
  76 | ```
  77 | 
  78 | 这里我采用 `yarn` 来安装
  79 | 
  80 | ![](https://files.mdnice.com/user/16854/befdd482-25e0-43f9-a5e3-7b34a9d8696c.png)
  81 | 
  82 | 2. 第二步: 选择 `vue`回车 => `vue-ts`回车
  83 | 
  84 | ![](https://files.mdnice.com/user/16854/0280afe9-2ba2-4dce-bdc4-6b756151fd5a.png)
  85 | ![](https://files.mdnice.com/user/16854/d1a58b76-2bc7-489b-966c-fb2a4136e39a.png)
  86 | 
  87 | 3. 第三步: `cd` 到项目文件夹,安装依赖,启动项目
  88 | 
  89 | ```bash
  90 | # 进入项目文件夹
  91 | cd vite_vue3_ts
  92 | # 安装依赖
  93 | yarn
  94 | # 启动
  95 | yarn dev
  96 | ```
  97 | 
  98 | ![](https://files.mdnice.com/user/16854/64867857-9e79-426a-89e3-c92303934094.png)
  99 | 
 100 | ## 约束代码风格
 101 | 
 102 | ### Eslint 支持
 103 | 
 104 | ```bash
 105 | # eslint 安装
 106 | yarn add eslint --dev
 107 | # eslint 插件安装
 108 | yarn add eslint-plugin-vue --dev
 109 | 
 110 | yarn add @typescript-eslint/eslint-plugin --dev
 111 | 
 112 | yarn add eslint-plugin-prettier --dev
 113 | 
 114 | # typescript parser
 115 | yarn add @typescript-eslint/parser --dev
 116 | ```
 117 | 
 118 | 注意: 如果 `eslint` 安装报错:
 119 | 
 120 | ![](https://files.mdnice.com/user/16854/98ff3635-d460-4a8f-b3d3-2597a03e56c0.png)
 121 | 
 122 | 可以尝试运行以下命令:
 123 | 
 124 | ```bash
 125 | yarn config set ignore-engines true
 126 | ```
 127 | 
 128 | 运行成功后再次执行 `eslint` 安装命令
 129 | 
 130 | ### 项目下新建 .eslintrc.js
 131 | 
 132 | > 配置 `eslint` 校验规则:
 133 | 
 134 | ```js
 135 | module.exports = {
 136 |   root: true,
 137 |   env: {
 138 |     browser: true,
 139 |     node: true,
 140 |     es2021: true,
 141 |   },
 142 |   parser: 'vue-eslint-parser',
 143 |   extends: [
 144 |     'eslint:recommended',
 145 |     'plugin:vue/vue3-recommended',
 146 |     'plugin:@typescript-eslint/recommended',
 147 |     'plugin:prettier/recommended',
 148 |     // eslint-config-prettier 的缩写
 149 |     'prettier',
 150 |   ],
 151 |   parserOptions: {
 152 |     ecmaVersion: 12,
 153 |     parser: '@typescript-eslint/parser',
 154 |     sourceType: 'module',
 155 |     ecmaFeatures: {
 156 |       jsx: true,
 157 |     },
 158 |   },
 159 |   // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
 160 |   plugins: ['vue', '@typescript-eslint', 'prettier'],
 161 |   rules: {
 162 |     '@typescript-eslint/ban-ts-ignore': 'off',
 163 |     '@typescript-eslint/no-unused-vars': 'off',
 164 |     '@typescript-eslint/explicit-function-return-type': 'off',
 165 |     '@typescript-eslint/no-explicit-any': 'off',
 166 |     '@typescript-eslint/no-var-requires': 'off',
 167 |     '@typescript-eslint/no-empty-function': 'off',
 168 |     '@typescript-eslint/no-use-before-define': 'off',
 169 |     '@typescript-eslint/ban-ts-comment': 'off',
 170 |     '@typescript-eslint/ban-types': 'off',
 171 |     '@typescript-eslint/no-non-null-assertion': 'off',
 172 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
 173 |     'no-var': 'error',
 174 |     'prettier/prettier': 'error',
 175 |     // 禁止出现console
 176 |     'no-console': 'warn',
 177 |     // 禁用debugger
 178 |     'no-debugger': 'warn',
 179 |     // 禁止出现重复的 case 标签
 180 |     'no-duplicate-case': 'warn',
 181 |     // 禁止出现空语句块
 182 |     'no-empty': 'warn',
 183 |     // 禁止不必要的括号
 184 |     'no-extra-parens': 'off',
 185 |     // 禁止对 function 声明重新赋值
 186 |     'no-func-assign': 'warn',
 187 |     // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
 188 |     'no-unreachable': 'warn',
 189 |     // 强制所有控制语句使用一致的括号风格
 190 |     curly: 'warn',
 191 |     // 要求 switch 语句中有 default 分支
 192 |     'default-case': 'warn',
 193 |     // 强制尽可能地使用点号
 194 |     'dot-notation': 'warn',
 195 |     // 要求使用 === 和 !==
 196 |     eqeqeq: 'warn',
 197 |     // 禁止 if 语句中 return 语句之后有 else 块
 198 |     'no-else-return': 'warn',
 199 |     // 禁止出现空函数
 200 |     'no-empty-function': 'warn',
 201 |     // 禁用不必要的嵌套块
 202 |     'no-lone-blocks': 'warn',
 203 |     // 禁止使用多个空格
 204 |     'no-multi-spaces': 'warn',
 205 |     // 禁止多次声明同一变量
 206 |     'no-redeclare': 'warn',
 207 |     // 禁止在 return 语句中使用赋值语句
 208 |     'no-return-assign': 'warn',
 209 |     // 禁用不必要的 return await
 210 |     'no-return-await': 'warn',
 211 |     // 禁止自我赋值
 212 |     'no-self-assign': 'warn',
 213 |     // 禁止自身比较
 214 |     'no-self-compare': 'warn',
 215 |     // 禁止不必要的 catch 子句
 216 |     'no-useless-catch': 'warn',
 217 |     // 禁止多余的 return 语句
 218 |     'no-useless-return': 'warn',
 219 |     // 禁止变量声明与外层作用域的变量同名
 220 |     'no-shadow': 'off',
 221 |     // 允许delete变量
 222 |     'no-delete-var': 'off',
 223 |     // 强制数组方括号中使用一致的空格
 224 |     'array-bracket-spacing': 'warn',
 225 |     // 强制在代码块中使用一致的大括号风格
 226 |     'brace-style': 'warn',
 227 |     // 强制使用骆驼拼写法命名约定
 228 |     camelcase: 'warn',
 229 |     // 强制使用一致的缩进
 230 |     indent: 'off',
 231 |     // 强制在 JSX 属性中一致地使用双引号或单引号
 232 |     // 'jsx-quotes': 'warn',
 233 |     // 强制可嵌套的块的最大深度4
 234 |     'max-depth': 'warn',
 235 |     // 强制最大行数 300
 236 |     // "max-lines": ["warn", { "max": 1200 }],
 237 |     // 强制函数最大代码行数 50
 238 |     // 'max-lines-per-function': ['warn', { max: 70 }],
 239 |     // 强制函数块最多允许的的语句数量20
 240 |     'max-statements': ['warn', 100],
 241 |     // 强制回调函数最大嵌套深度
 242 |     'max-nested-callbacks': ['warn', 3],
 243 |     // 强制函数定义中最多允许的参数数量
 244 |     'max-params': ['warn', 3],
 245 |     // 强制每一行中所允许的最大语句数量
 246 |     'max-statements-per-line': ['warn', { max: 1 }],
 247 |     // 要求方法链中每个调用都有一个换行符
 248 |     'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
 249 |     // 禁止 if 作为唯一的语句出现在 else 语句中
 250 |     'no-lonely-if': 'warn',
 251 |     // 禁止空格和 tab 的混合缩进
 252 |     'no-mixed-spaces-and-tabs': 'warn',
 253 |     // 禁止出现多行空行
 254 |     'no-multiple-empty-lines': 'warn',
 255 |     // 禁止出现;
 256 |     semi: ['warn', 'never'],
 257 |     // 强制在块之前使用一致的空格
 258 |     'space-before-blocks': 'warn',
 259 |     // 强制在 function的左括号之前使用一致的空格
 260 |     // 'space-before-function-paren': ['warn', 'never'],
 261 |     // 强制在圆括号内使用一致的空格
 262 |     'space-in-parens': 'warn',
 263 |     // 要求操作符周围有空格
 264 |     'space-infix-ops': 'warn',
 265 |     // 强制在一元操作符前后使用一致的空格
 266 |     'space-unary-ops': 'warn',
 267 |     // 强制在注释中 // 或 /* 使用一致的空格
 268 |     // "spaced-comment": "warn",
 269 |     // 强制在 switch 的冒号左右有空格
 270 |     'switch-colon-spacing': 'warn',
 271 |     // 强制箭头函数的箭头前后使用一致的空格
 272 |     'arrow-spacing': 'warn',
 273 |     'no-var': 'warn',
 274 |     'prefer-const': 'warn',
 275 |     'prefer-rest-params': 'warn',
 276 |     'no-useless-escape': 'warn',
 277 |     'no-irregular-whitespace': 'warn',
 278 |     'no-prototype-builtins': 'warn',
 279 |     'no-fallthrough': 'warn',
 280 |     'no-extra-boolean-cast': 'warn',
 281 |     'no-case-declarations': 'warn',
 282 |     'no-async-promise-executor': 'warn',
 283 |   },
 284 |   globals: {
 285 |     defineProps: 'readonly',
 286 |     defineEmits: 'readonly',
 287 |     defineExpose: 'readonly',
 288 |     withDefaults: 'readonly',
 289 |   },
 290 | }
 291 | 
 292 | ```
 293 | 
 294 | ### 项目下新建 .eslintignore
 295 | 
 296 | ```bash
 297 | # eslint 忽略检查 (根据项目需要自行添加)
 298 | node_modules
 299 | dist
 300 | ```
 301 | 
 302 | ### prettier 支持
 303 | 
 304 | ```bash
 305 | # 安装 prettier
 306 | yarn add prettier --dev
 307 | ```
 308 | 
 309 | ### 解决 eslint 和 prettier 冲突
 310 | 
 311 | > 解决 `ESLint` 中的样式规范和 `prettier` 中样式规范的`冲突`，以 `prettier` 的样式规范`为准`，使 ESLint 中的样式规范自动失效
 312 | 
 313 | ```bash
 314 | # 安装插件 eslint-config-prettier
 315 | yarn add eslint-config-prettier --dev
 316 | ```
 317 | 
 318 | ### 项目下新建 .prettier.js
 319 | 
 320 | > 配置 `prettier` 格式化规则:
 321 | 
 322 | ```js
 323 | module.exports = {
 324 |   tabWidth: 2,
 325 |   jsxSingleQuote: true,
 326 |   jsxBracketSameLine: true,
 327 |   printWidth: 100,
 328 |   singleQuote: true,
 329 |   semi: false,
 330 |   overrides: [
 331 |     {
 332 |       files: '*.json',
 333 |       options: {
 334 |         printWidth: 200,
 335 |       },
 336 |     },
 337 |   ],
 338 |   arrowParens: 'always',
 339 | }
 340 | ```
 341 | 
 342 | ### 项目下新建 .prettierignore
 343 | 
 344 | ```bash
 345 | # 忽略格式化文件 (根据项目需要自行添加)
 346 | node_modules
 347 | dist
 348 | ```
 349 | 
 350 | ### package.json 配置:
 351 | 
 352 | ```json
 353 | {
 354 |   "script": {
 355 |     "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
 356 |     "prettier": "prettier --write ."
 357 |   }
 358 | }
 359 | ```
 360 | 
 361 | 上面配置完成后,可以运行以下`命令`测试下代码检查个`格式化`效果:
 362 | 
 363 | ```bash
 364 | # eslint 检查
 365 | yarn lint
 366 | # prettier 自动格式化
 367 | yarn prettier
 368 | ```
 369 | 
 370 | ### 配置 husky + lint-staged
 371 | 
 372 | > 使用`husky` + `lint-staged`助力团队编码规范, husky&lint-staged 安装推荐使用 `mrm`, 它将根据 `package.json` 依赖项中的代码质量工具来安装和配置 husky 和 lint-staged，因此请确保在此之前安装并配置所有代码质量工具，如 `Prettier 和 ESlint`
 373 | 
 374 | ### 首先安装 mrm
 375 | 
 376 | ```bash
 377 | npm i mrm -D --registry=https://registry.npm.taobao.org
 378 | ```
 379 | 
 380 | `husky` 是一个为 git 客户端增加 `hook` 的工具。安装后，它会自动在仓库中的 `.git/` 目录下增加相应的钩子；比如 `pre-commit` 钩子就会在你执行 `git commit` 的触发。
 381 | 
 382 | 那么我们可以在 `pre-commit` 中实现一些比如 `lint 检查`、`单元测试`、`代码美化`等操作。当然，`pre-commit` 阶段执行的命令当然要保证其速度不要太慢，每次 commit 都等很久也不是什么好的体验。
 383 | 
 384 | `lint-staged`，一个仅仅过滤出 Git 代码暂存区文件(被 `git add` 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了呀，可能导致项目改动很大。
 385 | 
 386 | 所以这个 `lint-staged`，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束
 387 | 
 388 | ### 安装 lint-staged
 389 | 
 390 | > `mrm` 安装 `lint-staged` 会`自动`把 `husky` 一起安装下来
 391 | 
 392 | ```bash
 393 | npx mrm lint-staged
 394 | ```
 395 | 
 396 | 安装成功后会发现 `package.json` 中多了一下几个配置:
 397 | 
 398 | ![](https://files.mdnice.com/user/16854/1e23c422-c2e4-4478-ae17-6c954382c935.png)
 399 | 
 400 | 因为我们要结合 `prettier` 代码格式化,所有修改一下配置:
 401 | 
 402 | ```json
 403 | "husky": {
 404 |     "hooks": {
 405 |       "pre-commit": "lint-staged"
 406 |     }
 407 |   },
 408 |   "lint-staged": {
 409 |     "*.{js,jsx,vue,ts,tsx}": [
 410 |       "yarn lint",
 411 |       "prettier --write",
 412 |       "git add"
 413 |     ]
 414 |   }
 415 | ```
 416 | 
 417 | 好了,到这里代码格式化配置基本大功告成了!!!
 418 | 
 419 | 可以修改部分代码尝试 `git commit` ,你会发现代码将自动格式化:
 420 | 
 421 | 提交前的代码(发现编辑器`爆红`了):
 422 | 
 423 | ![](https://files.mdnice.com/user/16854/bb28c3a6-4751-459a-a87d-c4191f758e6b.png)
 424 | 
 425 | 执行 `commit` 操作,控制台可以看到走了哪些流程:
 426 | 
 427 | ![](https://files.mdnice.com/user/16854/82a2612e-44d6-4015-acef-62606b1a23ce.png)
 428 | 
 429 | `commit` 后的代码,是不是已经被格式化了
 430 | 
 431 | ![](https://files.mdnice.com/user/16854/4abce158-2d3f-43e8-854a-70536c89d116.png)
 432 | 
 433 | ### 配置文件引用别名 alias
 434 | 
 435 | > 直接修改 `vite.config.ts` 文件配置:
 436 | 
 437 | ```js
 438 | import { defineConfig } from 'vite'
 439 | import vue from '@vitejs/plugin-vue'
 440 | import path from 'path'
 441 | 
 442 | // https://vitejs.dev/config/
 443 | export default defineConfig({
 444 |   plugins: [vue()],
 445 |   resolve: {
 446 |     alias: {
 447 |       '@': path.resolve(__dirname, 'src'),
 448 |     },
 449 |   },
 450 | })
 451 | ```
 452 | 
 453 | > 修改 `tsconfig.json`
 454 | 
 455 | ```json
 456 | {
 457 |   "compilerOptions": {
 458 |     "target": "esnext",
 459 |     "module": "esnext",
 460 |     "moduleResolution": "node",
 461 |     "strict": true,
 462 |     "jsx": "preserve",
 463 |     "sourceMap": true,
 464 |     "resolveJsonModule": true,
 465 |     "esModuleInterop": true,
 466 |     "lib": ["esnext", "dom"],
 467 |     "baseUrl": ".",
 468 |     "paths": {
 469 |       "@/*":["src/*"]
 470 |     }
 471 |   },
 472 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 473 | }
 474 | 
 475 | ```
 476 | 
 477 | ## 配置 css 预处理器 scss
 478 | 
 479 | > 虽然 `vite` 原生支持 `less/sass/scss/stylus`，但是你必须手动安装他们的预处理器依赖
 480 | 
 481 | ### 安装
 482 | 
 483 | ```bash
 484 | yarn ass sass-loader --dev
 485 | yarn add dart-sass --dev
 486 | yarn add sass --dev
 487 | ```
 488 | 
 489 | ### 配置全局 scss 样式文件
 490 | 
 491 | 在 `src/assets` 下新增 `style` 文件夹，用于存放全局样式文件
 492 | 
 493 | 新建 `main.scss`, 设置一个用于测试的颜色`变量` :
 494 | 
 495 | ```scss
 496 | $test-color: red;
 497 | ```
 498 | 
 499 | 如何将这个全局样式文件`全局注入`到项目中呢？配置 `Vite` 即可：
 500 | 
 501 | ```js
 502 | css:{
 503 |     preprocessorOptions:{
 504 |       scss:{
 505 |         additionalData:'@import "@/assets/style/main.scss";'
 506 |       }
 507 |     }
 508 |   },
 509 | ```
 510 | 
 511 | ### 组件中使用
 512 | 
 513 | > 不需要任何引入可以直接使用全局`scss`定义的变量
 514 | 
 515 | ```scss
 516 | .test{
 517 |   color: $test-color;
 518 | }
 519 | ```
 520 | ## 路由
 521 | 
 522 | ```bash
 523 | # 安装路由
 524 | yarn add vue-router@4
 525 | ```
 526 | 
 527 | 在 `src` 文件下新增 `router` 文件夹 => `router.ts` 文件,内容如下:
 528 | 
 529 | ```js
 530 | import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 531 | 
 532 | const routes: RouteRecordRaw[] = [
 533 |   {
 534 |     path: '/',
 535 |     name: 'Login',
 536 |     component: () => import('@/pages/login/Login.vue'), // 注意这里要带上 文件后缀.vue
 537 |   },
 538 | ]
 539 | 
 540 | const router = createRouter({
 541 |   history: createWebHistory(),
 542 |   routes,
 543 | })
 544 | 
 545 | export default router
 546 | 
 547 | ```
 548 | 
 549 | 修改入口文件 `main.ts` :
 550 | 
 551 | ```js
 552 | import { createApp } from 'vue'
 553 | import App from './App.vue'
 554 | import router from './router/index'
 555 | 
 556 | const app = createApp(App)
 557 | 
 558 | app.use(router)
 559 | 
 560 | app.mount('#app')
 561 | 
 562 | ```
 563 | 
 564 | 到这里路由的基础配置已经完成了,更多配置信息可以查看 `vue-router` 官方文档:
 565 | 
 566 | > vue-router: `https://next.router.vuejs.org/zh/guide/`
 567 | 
 568 | `vue-router4.x` 支持 `typescript`，配置路由的类型是 `RouteRecordRaw`，这里 `meta` 可以让我们有更多的发挥空间，这里提供一些参考：
 569 | 
 570 | - `title`:`string`; 页面标题，通常必选。
 571 | - `icon?`:`string`; 图标，一般配合菜单使用。
 572 | - `auth?`:`boolean`; 是否需要登录权限。
 573 | - `ignoreAuth?`:`boolean`; 是否忽略权限。
 574 | - `roles?`:`RoleEnum[]`; 可以访问的角色
 575 | - `keepAlive?`:`boolean`; 是否开启页面缓存
 576 | - `hideMenu?`:`boolean`; 有些路由我们并不想在菜单中显示，比如某些编辑页面。
 577 | - `order?`:`number`; 菜单排序。
 578 | - `frameUrl?`:`string`; 嵌套外链。
 579 | 
 580 | > 这里只提供一些思路，每个项目涉及到的业务都会存在些差异，这里就不作详细讲解了，根据自己业务需求做配置即可。
 581 | 
 582 | ## 统一请求封装
 583 | 
 584 | > 使用过 vue2.x 的同学应该对 axios 很熟悉了，这里我们直接使用 axios 做封装：
 585 | 
 586 | ```bash
 587 | # 安装 axios
 588 | yarn add axios
 589 | # 安装 nprogress 用于请求 loading
 590 | # 也可以根据项目需求自定义其它 loading
 591 | yarn add nprogress
 592 | # 类型声明，或者添加一个包含 `declare module 'nprogress'
 593 | yarn add @types/nprogress --dev
 594 | ```
 595 | 
 596 | 实际使用中可以根据项目修改，比如`RESTful` `api`中可以自行添加`put`和`delete`请求,`ResType`也可以根据后端的通用返回值动态的去修改
 597 | 
 598 | 新增 `service` 文件夹，`service` 下新增 `http.ts` 文件以及 `api` 文件夹:
 599 | 
 600 | ![](https://files.mdnice.com/user/16854/7c0d7393-fd70-4bfb-aae8-e750e3463625.png)
 601 | 
 602 | `http.ts` : 用于`axios`封装
 603 | 
 604 | ```js
 605 | //http.ts
 606 | import axios, { AxiosRequestConfig } from 'axios'
 607 | import NProgress from 'nprogress'
 608 | 
 609 | // 设置请求头和请求路径
 610 | axios.defaults.baseURL = '/api'
 611 | axios.defaults.timeout = 10000
 612 | axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
 613 | axios.interceptors.request.use(
 614 |   (config): AxiosRequestConfig<any> => {
 615 |     const token = window.sessionStorage.getItem('token')
 616 |     if (token) {
 617 |       //@ts-ignore
 618 |       config.headers.token = token
 619 |     }
 620 |     return config
 621 |   },
 622 |   (error) => {
 623 |     return error
 624 |   }
 625 | )
 626 | // 响应拦截
 627 | axios.interceptors.response.use((res) => {
 628 |   if (res.data.code === 111) {
 629 |     sessionStorage.setItem('token', '')
 630 |     // token过期操作
 631 |   }
 632 |   return res
 633 | })
 634 | 
 635 | interface ResType<T> {
 636 |   code: number
 637 |   data?: T
 638 |   msg: string
 639 |   err?: string
 640 | }
 641 | interface Http {
 642 |   get<T>(url: string, params?: unknown): Promise<ResType<T>>
 643 |   post<T>(url: string, params?: unknown): Promise<ResType<T>>
 644 |   upload<T>(url: string, params: unknown): Promise<ResType<T>>
 645 |   download(url: string): void
 646 | }
 647 | 
 648 | const http: Http = {
 649 |   get(url, params) {
 650 |     return new Promise((resolve, reject) => {
 651 |       NProgress.start()
 652 |       axios
 653 |         .get(url, { params })
 654 |         .then((res) => {
 655 |           NProgress.done()
 656 |           resolve(res.data)
 657 |         })
 658 |         .catch((err) => {
 659 |           NProgress.done()
 660 |           reject(err.data)
 661 |         })
 662 |     })
 663 |   },
 664 |   post(url, params) {
 665 |     return new Promise((resolve, reject) => {
 666 |       NProgress.start()
 667 |       axios
 668 |         .post(url, JSON.stringify(params))
 669 |         .then((res) => {
 670 |           NProgress.done()
 671 |           resolve(res.data)
 672 |         })
 673 |         .catch((err) => {
 674 |           NProgress.done()
 675 |           reject(err.data)
 676 |         })
 677 |     })
 678 |   },
 679 |   upload(url, file) {
 680 |     return new Promise((resolve, reject) => {
 681 |       NProgress.start()
 682 |       axios
 683 |         .post(url, file, {
 684 |           headers: { 'Content-Type': 'multipart/form-data' },
 685 |         })
 686 |         .then((res) => {
 687 |           NProgress.done()
 688 |           resolve(res.data)
 689 |         })
 690 |         .catch((err) => {
 691 |           NProgress.done()
 692 |           reject(err.data)
 693 |         })
 694 |     })
 695 |   },
 696 |   download(url) {
 697 |     const iframe = document.createElement('iframe')
 698 |     iframe.style.display = 'none'
 699 |     iframe.src = url
 700 |     iframe.onload = function () {
 701 |       document.body.removeChild(iframe)
 702 |     }
 703 |     document.body.appendChild(iframe)
 704 |   },
 705 | }
 706 | export default http
 707 | 
 708 | ```
 709 | 
 710 | `api` : 项目中接口做统一管理，按照模块来划分
 711 | 
 712 | 在 `api` 文件下新增 `login` 文件夹,用于存放登录模块的请求接口,login 文件夹下分别新增 `login.ts` `types.ts` :
 713 | 
 714 | `login.ts`:
 715 | 
 716 | ```js
 717 | import http from '@/service/http'
 718 | import * as T from './types'
 719 | 
 720 | const loginApi: T.ILoginApi = {
 721 |     login(params){
 722 |         return http.post('/login', params)
 723 |     }
 724 | 
 725 | }
 726 | export default loginApi
 727 | ```
 728 | 
 729 | `types.ts`:
 730 | 
 731 | ```ts
 732 | export interface ILoginParams {
 733 |     userName: string
 734 |     passWord: string | number
 735 | }
 736 | export interface ILoginApi {
 737 |     login: (params: ILoginParams)=> Promise<any>
 738 | }
 739 | ```
 740 | 
 741 | 至此,一个简单地请求封装完成了!!!!
 742 | 
 743 | 除了自己手动封装 axios ,这里还推荐一个 vue3 的请求库: `VueRequest`,非常好用,下面来看看 `VueRequest`有哪些比较好用的功能吧!!!
 744 | 
 745 | - 🚀 所有数据都具有响应式
 746 | - 🔄 轮询请求
 747 | - 🤖 自动处理错误重试
 748 | - 🗄 内置请求缓存
 749 | - 💧 节流请求与防抖请求
 750 | - 🎯 聚焦页面时自动重新请求
 751 | - ⚙️ 强大的分页扩展以及加载更多扩展
 752 | - 📠 完全使用 Typescript 编写，具有强大的类型提示
 753 | - ⚡️ 兼容 Vite
 754 | - 🍃 轻量化
 755 | - 📦 开箱即用
 756 | 
 757 | ![](https://files.mdnice.com/user/16854/c587ba05-5a22-4024-a831-6fecffee5d20.png)
 758 | 
 759 | 是不是很强大 💪
 760 | 
 761 | > 官网链接: https://www.attojs.com/
 762 | 
 763 | ## 状态管理 pinia
 764 | 
 765 | > 由于 vuex 4 对 typescript 的支持让人感到难过，所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员
 766 | 
 767 | 尤大好像说 `pinia` 可能会代替 `vuex`，所以请放心使用。
 768 | 
 769 | ### 安装 pinia
 770 | 
 771 | Pinia 与 Vuex 的区别：
 772 | 
 773 | - `id` 是必要的，它将所使用 store 连接到 devtools。
 774 | - 创建方式：`new Vuex.Store(...)`(vuex3)，`createStore(...)`(vuex4)。
 775 | - 对比于 vuex3 ，state 现在是一个`函数返回对象`。
 776 | - 没有 `mutations`，不用担心，state 的变化依然记录在 devtools 中。
 777 | 
 778 | ```bash
 779 | # 安装
 780 | yarn add pinia@next
 781 | ```
 782 | 
 783 | main.ts 中增加
 784 | 
 785 | ```js
 786 | # 引入
 787 | import { createPinia } from "pinia"
 788 | # 创建根存储库并将其传递给应用程序
 789 | app.use(createPinia())
 790 | ```
 791 | 
 792 | 在 `src` 文件夹下新增 `store` 文件夹,接在在 store 中新增 `main.ts`
 793 | 
 794 | ### 创建 `store`, main.ts :
 795 | 
 796 | ```js
 797 | import { defineStore } from 'pinia'
 798 | 
 799 | export const useMainStore = defineStore({
 800 |   id: 'main',
 801 |   state: () =>({
 802 |     name: '超级管理员'
 803 |   })
 804 | })
 805 | ```
 806 | 
 807 | 组建中获取 store :
 808 | 
 809 | ```js
 810 | <template>
 811 |   <div>{{mainStore.name}}</div>
 812 | </template>
 813 | 
 814 | <script setup lang="ts">
 815 | import { useMainStore } from "@/store/main"
 816 | 
 817 | const mainStore = useMainStore()
 818 | 
 819 | </script>
 820 | ```
 821 | 
 822 | ### getters 用法介绍
 823 | 
 824 | > Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
 825 | 
 826 | `store` => `main.ts`
 827 | 
 828 | ```js
 829 | import { defineStore } from 'pinia'
 830 | 
 831 | export const useMainStore = defineStore({
 832 |   id: 'main',
 833 |   state: () => ({
 834 |     name: '超级管理员',
 835 |   }),
 836 |   // getters
 837 |   getters: {
 838 |     nameLength: (state) => state.name.length,
 839 |   }
 840 | })
 841 | ```
 842 | 
 843 | 组件中使用:
 844 | 
 845 | ```js
 846 | <template>
 847 |   <div>用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
 848 |   <hr/>
 849 |   <button @click="updateName">修改store中的name</button>
 850 | </template>
 851 | 
 852 | <script setup lang="ts">
 853 | import { useMainStore } from '@/store/main'
 854 | 
 855 | const mainStore = useMainStore()
 856 | 
 857 | const updateName = ()=>{
 858 |   // $patch 修改 store 中的数据
 859 |   mainStore.$patch({
 860 |     name: '名称被修改了,nameLength也随之改变了'
 861 |   })
 862 | }
 863 | </script>
 864 | ```
 865 | 
 866 | ![](https://files.mdnice.com/user/16854/ab70ded8-aa34-456a-9044-ac560ff5d2d4.gif)
 867 | 
 868 | ### actions
 869 | 
 870 | > 这里与 `Vuex` 有极大的不同，`Pinia` 仅提供了一种方法来定义如何更改状态的规则，放弃 `mutations` 只依靠 `Actions`，这是一项重大的改变。
 871 | 
 872 | `Pinia` 让 `Actions` 更加的灵活：
 873 | 
 874 | - 可以通过组件或其他 `action` 调用
 875 | - 可以从其他 `store` 的 `action` 中调用
 876 | - 直接在 `store` 实例上调用
 877 | - 支持`同步`或`异步`
 878 | - 有任意数量的参数
 879 | - 可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
 880 | - 可以 `$patch` 方法直接更改状态属性
 881 | 
 882 | ```ts
 883 | import { defineStore } from 'pinia'
 884 | 
 885 | export const useMainStore = defineStore({
 886 |   id: 'main',
 887 |   state: () => ({
 888 |     name: '超级管理员',
 889 |   }),
 890 |   getters: {
 891 |     nameLength: (state) => state.name.length,
 892 |   },
 893 |   actions: {
 894 |     async insertPost(data:string){
 895 |       // 可以做异步
 896 |       // await doAjaxRequest(data);
 897 |       this.name = data;
 898 |     }
 899 |   },
 900 | })
 901 | 
 902 | ```
 903 | 
 904 | ## 环境变量配置
 905 | 
 906 | > `vite` 提供了两种模式：具有开发服务器的`开发模式`（development）和`生产模式`（production）
 907 | 
 908 | 项目根目录新建:`.env.development` :
 909 | 
 910 | ```env
 911 | NODE_ENV=development
 912 | 
 913 | VITE_APP_WEB_URL= 'YOUR WEB URL'
 914 | ```
 915 | 
 916 | 项目根目录新建:`.env.production` :
 917 | 
 918 | ```env
 919 | NODE_ENV=production
 920 | 
 921 | VITE_APP_WEB_URL= 'YOUR WEB URL'
 922 | ```
 923 | 
 924 | 组件中使用：
 925 | 
 926 | ```js
 927 | console.log(import.meta.env.VITE_APP_WEB_URL)
 928 | ```
 929 | 
 930 | 配置 `package.json`:
 931 | 
 932 | > 打包区分开发环境和生产环境
 933 | 
 934 | ```json
 935 | "build:dev": "vue-tsc --noEmit && vite build --mode development",
 936 | "build:pro": "vue-tsc --noEmit && vite build --mode production",
 937 | ```
 938 | 
 939 | ## 使用组件库 Naive UI
 940 | 
 941 | > 组件库选择，这里我们选择 `Naive UI` 至于为什么选择它？我可以直接说`尤大大`推荐的吗？
 942 | 
 943 | - 官方介绍：
 944 |   - 一个 `Vue 3` 组件库
 945 |   - 比较完整，`主题可调`，使用 `TypeScript`，不算太慢
 946 |   - 有点意思
 947 | 
 948 | 介绍还是比较谦虚的，既然`尤大`推荐，肯定有它的优势了!!!
 949 | 
 950 | ### 安装 Naive UI
 951 | 
 952 | ```bash
 953 | # 安装 组件库
 954 | yarn add naive-ui
 955 | # 安装 字体
 956 | yarn add vfonts
 957 | ```
 958 | 
 959 | ### 如何使用
 960 | 
 961 | ```js
 962 | import { NButton } from "naive-ui"
 963 | <n-button>naive-ui</n-button>
 964 | ```
 965 | 
 966 | ### 全局配置 Config Provider
 967 | 
 968 | > 全局化配置设置内部组件的`主题`、`语言`和组件卸载于其他位置的 `DOM` 的类名。
 969 | 
 970 | ```html
 971 | <n-config-provider :locale="zhCN" :theme="theme">
 972 |     <!-- 容器 -->
 973 | </n-config-provider>
 974 | ```
 975 | 
 976 | 尤其是主题配置这个功能，我真的很喜欢 ❤️
 977 | 
 978 | > 组件库选择上不做任何强制，根据自己的项目需要选择合适的组件库即可
 979 | 
 980 | ## Vite 常用基础配置
 981 | 
 982 | ### 基础配置
 983 | 
 984 | `运行` `代理` 和 `打包` 配置
 985 | 
 986 | ```js
 987 | server: {
 988 |     host: '0.0.0.0',
 989 |     port: 3000,
 990 |     open: true,
 991 |     https: false,
 992 |     proxy: {}
 993 | },
 994 | ```
 995 | 
 996 | 生产环境去除 `console` `debugger`
 997 | 
 998 | ```js
 999 | build:{
1000 |   ...
1001 |   terserOptions: {
1002 |       compress: {
1003 |         drop_console: true,
1004 |         drop_debugger: true
1005 |       }
1006 |   }
1007 | }
1008 | ```
1009 | 
1010 | ### 生产环境生成 .gz 文件
1011 | 
1012 | > 开启 `gzip` 可以极大的压缩静态资源，对页面加载的速度起到了显著的作用。
1013 | 
1014 | 使用 `vite-plugin-compression` 可以 `gzip` 或 `brotli` 的方式来压缩资源，这一步需要服务器端的配合，`vite` 只能帮你打包出 `.gz` 文件。此插件使用简单，你甚至无需配置参数，引入即可。
1015 | 
1016 | ```bash
1017 | # 安装
1018 | yarn add --dev vite-plugin-compression
1019 | ```
1020 | 
1021 | plugins 中添加：
1022 | 
1023 | ```js
1024 | import viteCompression from 'vite-plugin-compression'
1025 | 
1026 | // gzip压缩 生产环境生成 .gz 文件
1027 | viteCompression({
1028 |       verbose: true,
1029 |       disable: false,
1030 |       threshold: 10240,
1031 |       algorithm: 'gzip',
1032 |       ext: '.gz',
1033 |     }),
1034 | ```
1035 | 
1036 | ### 最终 vite.config.ts
1037 | 
1038 | ```js
1039 | import { defineConfig } from 'vite'
1040 | import vue from '@vitejs/plugin-vue'
1041 | import path from 'path'
1042 | //@ts-ignore
1043 | import viteCompression from 'vite-plugin-compression'
1044 | 
1045 | // https://vitejs.dev/config/
1046 | export default defineConfig({
1047 |   base: './', //打包路径
1048 |   plugins: [
1049 |     vue(),
1050 |     // gzip压缩 生产环境生成 .gz 文件
1051 |     viteCompression({
1052 |       verbose: true,
1053 |       disable: false,
1054 |       threshold: 10240,
1055 |       algorithm: 'gzip',
1056 |       ext: '.gz',
1057 |     }),
1058 |   ],
1059 |   // 配置别名
1060 |   resolve: {
1061 |     alias: {
1062 |       '@': path.resolve(__dirname, 'src'),
1063 |     },
1064 |   },
1065 |   css:{
1066 |     preprocessorOptions:{
1067 |       scss:{
1068 |         additionalData:'@import "@/assets/style/main.scss";'
1069 |       }
1070 |     }
1071 |   },
1072 |   //启动服务配置
1073 |   server: {
1074 |     host: '0.0.0.0',
1075 |     port: 8000,
1076 |     open: true,
1077 |     https: false,
1078 |     proxy: {}
1079 |   },
1080 |   // 生产环境打包配置
1081 |   //去除 console debugger
1082 |   build: {
1083 |     terserOptions: {
1084 |       compress: {
1085 |         drop_console: true,
1086 |         drop_debugger: true,
1087 |       },
1088 |     },
1089 |   },
1090 | })
1091 | 
1092 | ```
1093 | 
1094 | ## 常用插件
1095 | 
1096 | > 可以查看官方文档：https://vitejs.cn/plugins/
1097 | 
1098 | - `@vitejs/plugin-vue` 提供 `Vue 3` 单文件组件支持
1099 | - `@vitejs/plugin-vue-jsx` 提供 Vue 3 `JSX` 支持（通过 专用的 Babel 转换插件）
1100 | - `@vitejs/plugin-legacy` 为打包后的文件提供传统浏览器`兼容性`支持
1101 | - `unplugin-vue-components` 组件的按需自动导入
1102 | - `vite-plugin-compression` 使用 gzip 或者 brotli 来压缩资源
1103 | - .....
1104 | 
1105 | ## 非常推荐使用的 hooks 库
1106 | 
1107 | > 因为`vue3.x`和`react hooks`真的很像，所以就称为 `hooks`
1108 | 
1109 | `VueUse`：https://vueuse.org/
1110 | 
1111 | ![](https://files.mdnice.com/user/16854/cbf73b46-d22b-44e7-bca1-c33764e41784.png)
1112 | 
1113 | 看到这个库的第一眼，让我立马想到了 react 的 `ahooks`
1114 | 
1115 | `VueUse` 是一个基于 `Composition API` 的实用函数集合。通俗的来说，这就是一个`工具函数`包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。
1116 | 
1117 | 💡想要入手 vue3 的小伙伴，赶快学习起来吧！！！
1118 | 
1119 | 💡最后给大家奉上仓库地址吧：https://github.com/xushanpei/vite_vue3_ts
1120 | 
1121 | ## 写在最后
1122 | 
1123 | > `公众号`：`前端开发爱好者` 专注分享 `web` 前端相关`技术文章`、`视频教程`资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个`赞` 👍 或者 ➕`关注` 都是对我最大的支持。
1124 | 
1125 | 欢迎`长按图片加好友`，我会第一时间和你分享`前端行业趋势`，`面试资源`，`学习途径`等等。
1126 | 
1127 | ![](https://files.mdnice.com/user/16854/b382cc29-13f4-4cd7-86ae-c669cb7ae117.jpg)
1128 | 
1129 | 关注公众号后，在首页：
1130 | 
1131 | - 回复`面试题`，获取最新大厂面试资料。
1132 | - 回复`简历`，获取 3200 套 简历模板。
1133 | - 回复`React实战`，获取 React 最新实战教程。
1134 | - 回复`Vue实战`，获取 Vue 最新实战教程。
1135 | - 回复`ts`，获取 TypeAcript 精讲课程。
1136 | - 回复`vite`，获取 精讲课程。
1137 | - 回复`uniapp`，获取 uniapp 精讲课程。
1138 | - 回复`js书籍`，获取 js 进阶 必看书籍。
1139 | - 回复`Node`，获取 Nodejs+koa2 实战教程。
1140 | - 回复`数据结构算法`，获取 数据结构算法 教程。
1141 | - 回复`架构师`，获取 架构师学习资源教程。
1142 | - 更多教程资源应用尽有，欢迎`关注获取`
1143 | 


--------------------------------------------------------------------------------