Daisy__yangyang

用 vite 构建 vue3 + TS 项目实战

1、项目初始化

2、eslint 基础配置

3、配置 git commit hook

4、在开发和构建中进行代码规范校验

5、GitCommit规范

6、 Vite中的TS环境说明

7、Vue3 中 Ts 支持

8、Vue3中的script-setup语法

9、script-setup中的编译宏

10、配置转换JSX和TSX

11、初始化 Vue Router

12、初始化 Vuex

13、配置模块路径别名

14、CSS 样式管理

15、和服务端交互

16、多环境 baseURL

17、跨域问题

18、初始化 Element Plus

18、项目地址

1、项目初始化

npm install [email protected] -g // 全局安装 create-vite
npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名)
cd shop-admin
npm install
npm run dev

2、eslint 基础配置

npm install eslint --save-dev
npm install @eslint/create-config@latest -D
npm init @eslint/config

修改 .eslintrc.js的配置，修改为 'plugin:vue/vue3-strongly-recommended'（适用于 vue3版本的eslint）

在 npm scripts 中添加验证脚本："lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"

在vscode编辑器扩展中禁用 Vetur
在vscode编辑器扩展中安装 eslint 插件
在vscode编辑器扩展中安装Vue Language Features (Volar)
进入 vscode 首选项---设置中---扩展---Eslint，勾选Format格式化如下图

npx使用教程：npx 使用教程 - 阮一峰的网络日志

3、配置 git commit hook

在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，所以速度很快。

lint-staged官网：https://github.com/okonet/lint-staged#readme
安装：npx mrm@2 lint-staged（如果安装报错，看这篇文章npx mrm@2 lint-staged执行报错_Daisy__yangyang的博客-CSDN博客）
配置 prepare、lint-staged

// package.json
{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "tsc": "vue-tsc --noEmit",
    "lint": "eslint ./src/**/*.ts ./src/**/*.vue --cache --fix",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      // "git add" 之前的版本需要手动把 lint 过程中修改的代码手动 add，新版本不需要了
    ]
  }
}

4、在开发和构建中进行代码规范校验

插件二选一：

https://github.com/vitejs/awesome-vite#plugins
https://github.com/gxmari007/vite-plugin-eslint

安装 vite-eslint-plugin：npm install vite-plugin-eslint -D

在 vite.config.ts 配置插件：

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false
    })
  ]
})

5、GitCommit规范

推荐参考：

Commit message 和 Change log 编写指南
Git 使用规范流程
Git 工作流程

统一团队 Git commit 日志标准，便于后续代码 review，版本发布以及日志自动化生成等等。

常用 commit 类型说明：

相关工具：

commitlint：验证 git commit 日志是否符合规范

yarn husky add .husky/commit-msg ""，在 husky 目录下新增一个文件 commit-msg
将 commit-msg 文件的 undefined 内容修改为 npx --no -- commitlint --edit $1

在根目录新建 commitlint.config.js

// commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'build',
      'ci',
      'chore',
      'docs',
      'feat',
      'fix',
      'perf',
      'refactor',
      'revert',
      'style',
      'test'
    ]]
    // 'subject-full-stop': [0, 'never'],
    // 'subject-case': [0, 'never']
  }
}
//   build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
//   ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
//   docs：文档更新
//   feat：新增功能
//   fix：bug 修复
//   perf：性能优化
//   refactor：重构代码(既没有新增功能，也没有修复 bug)
//   style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
//   test：新增测试用例或是更新现有测试
//   revert：回滚某个更早之前的提交
//   chore：不属于以上类型的其他类型

Commitizen：辅助编写符合 git commit 规范的工具

6、 Vite中的TS环境说明

官方文档说明：功能 {#features} | Vite中文网
env.d.ts 文件作用：
- 声明环境变量内容
- 支持在 ts文件中识别 .vue文件
建议在 package.json 中新增一个 scripts 脚本用来单独执行 TS 类型验证

// package.json

"scripts": {
  ...
  "build": "npm run tsc && vite build",
  "tsc": "vue-tsc -noEmit"
},

-noEmit 表示只验证类型，不输出编译结果。

7、Vue3 中 Ts 支持

官方文档：TypeScript 支持 | Vue.js

8、Vue3中的script-setup语法

官方文档：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

9、script-setup中的编译宏

官方文档：User Guide | eslint-plugin-vue

.eslintrc.js配置全局变量：

// .eslintrc.js

module.exports = {
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-strongly-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

10、配置转换JSX和TSX

渲染函数：渲染函数 | Vue.js

vite 转换 JSX：

vite/packages/plugin-vue-jsx at main · vitejs/vite · GitHub

https://vitejs.cn/guide/features.html#jsx

11、初始化 Vue Router

1、安装 vue-router

npm install vue-router@4

2、初始化路由实例

// src\router\index.ts

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

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('../views/home/index.vue')
  },
  {
    path: '/login',
    component: () => import('../views/login/index.vue')
  }
]

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

export default router

// src\main.ts

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

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

12、初始化 Vuex

1、安装

npm install vuex@next --save

2、配置

// src\store\index.ts

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

export default store

// src\main.ts

import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

TS 支持

官方文档方案（仅支持 state）：TypeScript 支持 | Vuex
第三方方案（仅供参考）：Vuex + TypeScript - DEV Community

Vuex 4 版本依然没有很好的解决 TS 类型问题，官方宣称会在 Vuex 5 中提供更好的方案。

13、配置模块路径别名

在 Vite 中支持模块路径别名自定义，参考文档。

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 注意：在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块：npm i -D @types/node
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  ...
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
})

如果项目中使用了 TS，则还需要告诉 TS 别名的路径，否则 TS 会报错。

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  ...
}

使用示例：

// js

import xxx from '@/api/user.ts'

// html


// css
@import url("@/styles/index.scss");
background: url("@/assets/logo.png");

还有一些插件可以快速配置路径别名：

vite-aliases：基于项目结构自动生成别名路径

14、CSS 样式管理

1、Vite 中的样式支持

Vite 中对 CSS 的支持：

功能 | Vite 官方中文文档

（1）由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。

（2）但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .stylus
npm install -D stylus

如果是用的是单文件组件，可以通过

用 vite 构建 vue3 + TS 项目实战

1、项目初始化

2、eslint 基础配置

3、配置 git commit hook

4、在开发和构建中进行代码规范校验

5、GitCommit规范

6、 Vite中的TS环境说明

7、Vue3 中 Ts 支持

8、Vue3中的script-setup语法

9、script-setup中的编译宏

10、 配置转换JSX和TSX

11、初始化 Vue Router

12、初始化 Vuex

13、配置模块路径别名

14、CSS 样式管理

10、配置转换JSX和TSX