第五章、Vue3高级

• 二十一、项目搭建规范
  • 1、创建项目
  • 2、代码规范
    • a、.editorconfig（编辑器编辑风格）
    • b、prettier（代码格式化风格）
    • c、eslint（代码风格检测工具）
    • d、git Husky（提交前代码格式化风格）
    • e、commitizen（提交信息格式化风格）
    • f、commitlint（提交信息风格检测工具）
  • 3、项目结构
    • a、vue.config.js
    • b、vue-router
    • c、vuex
    • d、element-plus
    • e、axios
    • f、环境变量
    • g、tsconfig.json
    • h、shims-vue.d.ts
• 二十二、项目实战细节
  • 1、获取组件实例的类型

二十一、项目搭建规范

1、创建项目

• 命令

vue create vue3-ts

• 选项

? Please pick a preset: 
    - Manually select features
? Check the features needed for your project: 
    - Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 
    - 3.x
? Use class-style component syntax? 
    - No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 
    - Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) 
    - No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
    - Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: 
    - Prettier
? Pick additional lint features: 
    - Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? 
    - In dedicated config files
? Save this as a preset for future projects? 
    - No
? Pick the package manager to use when installing dependencies: 
    - NPM

2、代码规范

a、.editorconfig（编辑器编辑风格）

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

b、prettier（代码格式化风格）

• 安装

npm i -D prettier

• .prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

* useTabs：使用tab缩进还是空格缩进，选择false
* tabWidth：tab是空格的情况下，是几个空格，选择2个
* printWidth：当行字符的长度，推荐80，也有人喜欢100或者120
* singleQuote：使用单引号还是双引号，选择true，使用单引号
* trailingComma：在多行输入的尾逗号是否添加，设置为 `none`
* semi：语句末尾是否要加分号，默认值true，选择false表示不加

• .prettierignore

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

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

/public/*

• package.json

{
  "scripts": {
    "prettier": "prettier --write ."
  }
}

c、eslint（代码风格检测工具）

• 安装

npm i -D eslint-plugin-prettier eslint-config-prettier

• .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    // 解决eslint和prettier的冲突
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off'
  }
}

d、git Husky（提交前代码格式化风格）

• 命令

################
# 1、用于拦截git命令
# 2、项目三处变化：
#     - package.json多一个依赖（{"devDependencies": {"husky": ""}}）
#     - 项目下多一个.husky目录
#     - package.json多一个脚本（{"scripts": {"prepare": "husky install"}}）
################
npx husky-init && npm install

• .husky/pre-commit

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

npm run lint

e、commitizen（提交信息格式化风格）

• 安装

npm i -D commitizen

• 命令

################
# 1、项目两处变化：
#     - package.json多一个依赖（{"devDependencies": {"cz-conventional-changelog": ""}}）
#     - package.json多一个配置
#       （{"config": {"commitizen": {"path": "./node_modules/cz-conventional-changelog"}}}）
################
npx commitizen init cz-conventional-changelog --save-dev --save-exact

• package.json（代码的git提交操作使用此脚本）

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

• 选项

? Select the type of change that you're committing: 
    - 提交的类型
? What is the scope of this change (e.g. component or file name): (press enter to skip) 
    - 提交的范围
? Write a short, imperative tense description of the change (max 87 chars):
    - 提交的简短描述信息
? Provide a longer description of the change: (press enter to skip)
    - 提交的详细描述信息
? Are there any breaking changes? 
    - No
? Does this change affect any open issues? 
    - No

f、commitlint（提交信息风格检测工具）

• 安装

npm i -D @commitlint/config-conventional @commitlint/cli

• commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

• 命令

################
# 1、项目一处变化：
#     - .husky下多一个commit-msg文件
################
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

3、项目结构

a、vue.config.js

const path = require('path')

module.exports = {
  // 1、方式一: 通过Vue CLI提供的选项来配置（推荐）
  outputDir: 'dist',
  publicPath: '/',
  // 2、方式二: 通过configureWebpack（与webpack配置选项一致）
  // 2.1、对象：合并webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    }
  },
  // 2.2、函数：修改webpack配置
  /*
  configureWebpack: (config) => {
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
      components: '@/components'
    }
  },*/
  // 3、方式三：通过chainWebpack（与webpack配置选项一致）
  // 3.1、函数：修改webpack配置
  /*
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('components', '@/components')
  }*/
}

b、vue-router

• 安装

npm i -S vue-router@next

• src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: Array = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

• src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

• src/App.vue

c、vuex

• 安装

npm i -S vuex@next

• src/store/index.ts

import { createStore, useStore as useVuexStore } from 'vuex'
import user, { IUserState } from './modules/user'

export interface IRootState {
  user: IUserState
}

export default createStore({
  modules: {
    user
  }
})

export function useStore() {
  return useVuexStore()
}

• src/store/modules/user.ts

import { IRootState } from '@/store'

export interface IUserState {
  token: string
  userInfo: {
    id: string
    nickname: string
  }
}

const user: Module = {
  namespaced: true,
  state() {
    return {
      token: '',
      userInfo: {
        id: '',
        nickname: ''
      }
    }
  },
  mutations: {},
  actions: {}
}
export default user

• src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

• src/App.vue

d、element-plus

• 安装

npm i -S element-plus

• src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

• src/App.vue

e、axios

• 安装

npm i -S axios

• 知识点

* Promise指定了泛型，则resolve(res)和.then(res=>{})的res就是any类型
* axios配置默认值优先级：请求的config参数 > 实例的defaults属性
* axios实例多个拦截器会合并，执行顺序是从后往前

• src/utils/request.ts

import axios from 'axios'
import type { AxiosRequestConfig } from 'axios'
import Cookies from 'js-cookie'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  (config) => {
    // 1、请求头添加令牌
    const token = Cookies.get('token')
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response) => {
    // 2、处理后端接口统一响应结果的状态码
    switch (response.data.code) {
      case 999:
        console.log('错误')
        break
      default:
    }
    return response
  },
  (error) => {
    // 3、处理http的状态码
    switch (error.response.status) {
      case 401:
        console.log('未认证或令牌过期')
        break
      case 403:
        console.log('无权限访问拒绝')
        break
      default:
    }
    return Promise.reject(error)
  }
)

interface IResponseBody {
  code: number
  data: T
  message: string
}

export default function (
  config: AxiosRequestConfig
): Promise> {
  return service(config).then((res) => {
    return res.data
  })
}

• src/api/user.ts

import request from '@/utils/request'

export function login(data: any) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

• src/App.vue

f、环境变量

* 模式：
    - 脚本命令：vue-cli-service serve（默认--mode development）
      引用文件：.env.development
      NODE_ENV：process.env.NODE_ENV = "development"
    - 脚本命令：vue-cli-service build（默认--mode production）
      引用文件：.env.production
      NODE_ENV：process.env.NODE_ENV = "production"
    - 脚本命令：vue-cli-service build --mode staging（手动指定）
      引用文件：.env.staging
      NODE_ENV：process.env.NODE_ENV = "staging"
* NODE_ENV变量无需手动赋值
* 其他变量应以VUE_APP_开头才会自动注入到代码中
* .env优先级小于.env.development或.env.production等

g、tsconfig.json

{
  "compilerOptions": {
    // 目标代码：babel编译（esnext），tsc编译（es5）
    "target": "esnext",
    // 目标代码模块化方案：es模块化方案（esnext），模块化方案混合使用（umd）
    "module": "esnext",
    // ts严格模式
    "strict": true,
    // jsx处理：不转化处理（preserve）
    "jsx": "preserve",
    // 导入功能辅助
    "importHelpers": true,
    // 解析模块方式：后缀名顺序查找文件（node）
    "moduleResolution": "node",
    // 跳过第三方库的类型检测
    "skipLibCheck": true,
    // 源代码模块化方案：模块化方案混合使用
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 是否生成映射文件
    "sourceMap": true,
    // 文件解析路径
    "baseUrl": ".",
    // 解析类型
    "types": [
      "webpack-env"
    ],
    // 路径别名（与webpack配置对应）
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    // 基础类型库
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

h、shims-vue.d.ts

/* eslint-disable */
/**
 * 1、声明.vue文件：.vue文件导出的component对象的类型是DefineComponent<{}, {}, any>
 * 2、.vue文件defineComponent函数：
 *     - 源码：function defineComponent(options) {return options}
 *     - 作用：可以使options具有类型限制
 */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

二十二、项目实战细节

1、获取组件实例的类型

• 父组件

• 子组件