保姆级教程带你创建 Vue3 项目模版

大家好，今天带来的是《手把手教你创建自己的 Vue3 项目模版》。

前言

Vue3 发布至今已经过去很久了，Vue3 也成为了新的默认模版，相关生态也发展比较成熟，借此机会撸一个功能完善的项目模板（炒炒冷饭😁），项目中使用的框架和依赖皆为最新版本。下面会涉及到搭建项目的完整流程以及介绍开发模版时用到的框架、依赖和如何配置。文章较长，干货满满，可以挑选自己感兴趣的部分阅读，希望能给大家带来一点收获。

😊查看源码戳我 😄在线预览戳我

🙏内容较多，可能会有失误和遗漏的地方，欢迎各位大佬在评论区指出或者在 Github 提出 issue，同时也欢迎各位提 PR。

开箱即用功能

• Vue3 - 更好的性能和开发体验，提供更多新的特性和改进的API
• Vite4 - 快速的Web开发构建工具，它基于ESM原生模块系统，支持快速的冷启动和热模块替换
• Vue Router - 可配置的、方便的路由管理
• Pinia - 新一代的全局状态管理
• TypeScript - JavaScript 超集，提供类型检查、更好的 IDE 支持和其他强大的特性
• VueUse - 提供了许多实用的、经过优化的自定义 Hooks 函数，简化应用程序开发
• Pnpm - 快速、高效、可靠且易于使用的包管理器
• Icones - 大量、精美的免费图标库
• Arco Design Vue - 完善、灵活的基于 Vue3 的 UI组件库
• Axios - 基于 Promise 的 HTTP 请求库
• Tailwind CSS - 高度可定制、实用的 CSS 框架
• Less - 实用、灵活、易于上手的CSS预处理器
• Eslint、Prettier - 保证团队代码的质量和可读性，减少语法错误和风格不一致
• husky、lint-staged、commitlint - 帮助团队规范 Git 提交规范和代码质量，避免错误和重构
• Airbnb Style - 代码风格
• @vitejs/plugin-vue-jsx - 支持 tsx/jsx 写法
• unplugin-vue-components - 自动按需引入Vue 组件
• unplugin-auto-import - 自动按需引入 Vue、Vue Router、Pinia 和 VueUse 中的 API
• unplugin-icons - 图标库自动按需引入
• vite-svg-loader - 以组件形式使用 SVG 图片

以上功能均已完成配置和验证，可放心使用！！！

PS： 使用 Pnpm 时 nodejs 最低版本为 v16.14，可使用 NVM 进行 nodejs 版本管理

项目目录结构

• .husky - 用来存放 husky 钩子的配置文件
• .vscode - 用来存放项目中的 vscode 配置
• public - 用来存放一些公共文件，会被打包至 dist 根目录下
• src - 项目代码
• api - Axios 封装以及 Http 接口请求
• assets - 静态资源
• components - 封装的组件
• router - 路由配置
• store - 全局状态管理配置
• utils - 工具类
• views - 页面视图

项目初始化

1. 先全局安装 pnpm：npm install -g pnpm
2. 使用 vite 进行项目创建

pnpm create vite

# 项目名称
Project name: >> vite-vue3-template
# 选择框架
Select a framework: >> Vue
# 选择语言
Select a variant: >> TypeScript

自此一个简单的 Vue3 + Vite + TypeScript 的项目就算搭建完成，接下来我们在此基础上加上一些必须的功能以及配置。例如：路由管理、全局状态管理、UI 组件库、图标库、代码格式化规范、资源自动按需加载、Git 提交规范等等

TS 配置修改

创建完成后tsconfig.json和tsconfig.node.json中有几处配置会爆红，需要修改配置

{
  "compilerOptions": {
    "moduleResolution": "node", // 模块化标准
    "forceConsistentCasingInFileNames": true, // 导入和文件名是否大小写匹配
  }
}

tsconfig.node.json需要修改的地方和上面一致，还需另外增加 "strict": true

❗️PS：在写本文时 TypeScript 更新至 5.0 版本，moduleResolution增加了 bundler 选项，想了解moduleResolution可看看下面两篇文章：

Vite 相关配置

下面是 Vite 的一些相关配置，方便我们开发以及项目构建

配置别名

import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
});

PS：配置前需要先安装 @types/node，否则 __dirname 会报错，原因在于 path 模块是 node.js 的内置模块，而 node.js 默认是不支持 ts 文件的；tsconfig.json 文件也需要配置。

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

开发服务设置

export default defineConfig({
  server: {
    host: true, // 可以以IP访问
    port: 8080, // 端口
    open: true, // 自动打开游览器
    cors: true, // 允许跨域
    proxy: {
      '/api': {
        // 这里配置真实的后端环境地址
        target: 'http://example',
        changeOrigin: true,
        rewrite: (path) => path.replace('/api/', '/'),
      },
    },
  },
})

bulid 配置

export default defineConfig({
  build: {
    // 消除打包大小超过500kb警告
    chunkSizeWarningLimit: 2000,
    // 在生产环境移除console.log
    terserOptions: {
      compress: {
        drop_console: false,
        pure_funcs: ['console.log', 'console.info'],
        drop_debugger: true,
      },
    },
    assetsDir: 'static/assets',
    // 静态资源打包到dist下的不同目录
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
  },
})

自动按需加载

是否厌倦了开发过程中每次使用组件库时，需要不断引入组件！！！ 是否厌倦了开发工程中使用 Vue、Pinia、VueRouter 和 VueUse 中的 API 时，需要不断 import！！！

这两个依赖包可以帮我们解决自动按需加载的问题：

• unplugin-auto-import - 用于自动导入未声明的变量和模块的插件
• unplugin-vue-components - 用于自动导入组件的插件

安装：pnpm install unplugin-auto-import unplugin-vue-components -D 配置如下：

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      dts: './src/auto-imports.d.ts', // 生成类型声明文件路径，设为 false 可禁止生成文件
      imports: [],
      eslintrc: {
        enabled: true, // 启用与 Eslint 集成
        filepath: './eslintrc-auto-import.json', // 生成 EsLint 配置文件的路径，在下面 Eslint 配置部分会使用
        globalsPropValue: true, // 用于覆盖 globals 属性，
      },
      resolvers: [], // 路径解析器列表
    }),
    Components({
      dts: './src/components.d.ts', // 生成类型声明文件路径，设为 false 可禁止生成文件
      resolvers: [], // 组件路径解析器列表
    }),
  ]
})

UI 组件库自动按需加载

因为我这里使用的 UI 组件是 Arco Design Vue，直接对照官方文档配置即可，如何使用的其他组件库自己对照修改这部分配置即可。 增加以下配置：

import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
  	AutoImport({
+      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [
+        ArcoResolver({ sideEffect: true }),
      ],
    }),
  ]
})

Vue、Vue Router、Pinia 和 VueUse 自动按需加载

增加以下配置：

import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
+import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
  	AutoImport({
+      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
    }),
    Components({
      resolvers: [
+        VueUseComponentsResolver(),
      ],
    }),
  ]
})

图标库自动按需加载

这里选用的图标库是 Icones，具有海量图标；

实现图标自动按需加载还需下载另一个依赖 - unplugin-icons； vite.config.ts增加以下配置：

import Components from 'unplugin-vue-components/vite';
+ import Icons from 'unplugin-icons/vite';
+ import IconsResolver from 'unplugin-icons/resolver';

export default defineConfig({
  plugins: [
+  	Icons({ autoInstall: true, compiler: 'vue3' }),
    Components({
      resolvers: [
+        IconsResolver(),
      ],
    }),
  ]
})

使用方式：以下图图标为例，直接在页面中这样使用<i-logos-vue />即可

代码格式化规则配置

ESLint 是语法检查工具，可以检查代码在不同浏览器和 Node.js 版本中的表现，以及代码风格是否符合指定的规则。而 Prettier 则是格式化工具，可以将代码自动格式化成风格一致的样式。目前前端项目中进行代码风格和规范基本上是 Eslint 和 Prettier 来配合使用，以此帮助我们提高项目的开发效率、代码质量和可读性。

Eslint

1. 首先需要来安装 Eslint 依赖 - pnpm install eslint -D
2. 接下来进行 Eslint 的初始化 - pnpx eslint --init，初始化期间会需要对一些配置进行选择，选择完毕后然后自动安装缺失的依赖包。如何选择配置并非固定的，可以根据自己的项目来

pnpx eslint --init

# 如何使用 Eslint？
# 1.To check syntax only  只检查语法
# 2.To check syntax and find problems  检查语法并发现问题
# 3.To check syntax, find problems, and enforce code style  检查语法、发现问题并强制执行代码样式
How would you like to use ESLint?: >> 我们这里选3，因人而异

# 使用什么类型的模块？
# JavaScript modules (import/export)
# CommonJS (require/exports)
# None of these
What type of modules does your project use?: >> JavaScript modules (import/export)

# 什么框架？
Which framework does your project use?: >> Vue.js

# 是否使用 TypeScript？
Does your project use TypeScript?: >> Yes

# 运行环境？
Where does your code run?: >> Browser、Node

# 定义什么样的代码风格？
# 我们直接使用社区风格
How would you like to define a style for your project?: >> Use a popular style guide

# 选择哪个风格？
# 这里我们使用的是 Airbnb Style，但是不在下面可选项里，先随便选个 Standard，后面再改过来
Which style guide do you want to follow?

# 配置文件格式
What format do you want your config file to be in?: >> JavaScript

# 最后会询问是否下载缺失的依赖和安装依赖方式，直接选 Yes 和 pnpm 即可
# @typescript-eslint/eslint-plugin
# eslint-config-standard-with-typescript
# eslint-plugin-import
# eslint-plugin-n
# eslint-plugin-promise
# eslint-plugin-vue

1. 修改代码风格为 Aribnb Style
   1. pnpm uninstall eslint-config-standard-with-typescript
   2. pnpm install eslint-config-airbnb-base -D
   3. 修改配置文件.eslintrc.js/.eslintrc.cjs，standard-with-typescript => airbnb-base

现在 Eslint 的基础配置已经完成，如果需要和 Prettier 配合还需要增加其他配置，在 Prettier 部分会进行介绍，下面给粗略介绍下 Eslint 的配置文件。

PS：最后需要在package.json的scripts中加入一个格式化代码的脚本："lint": "eslint --fix \"./src/**/*.{ts,js,vue}\""

配置文件

因为 Eslint 配置文件里的配置项不是全部修改过，下面只介绍一部分使用到的配置项，下面没有涉及到的配置项就是没有进行修改直接使用的默认配置。

• parse- 指定 Eslint 使用哪个解析器对代码进行语法分析，解析器负责将源代码转换为 AST 以便于进行规则检查
• rules- 指定代码规则和错误检查方式，键名表示一条规则，对应的键值为规则的配置
• extends - 用来扩展或继承现有的的配置集合，通常是一些流行的共享规则包，例如eslint:recommended、airbnb
• plugins- 使用第三方插件来扩展 Eslint 的功能，如支持对 React、Vue 等框架的语法检查

对于 extends 和 plugins 的补充：

• 通常我们可以通过依赖包的名称判断它是个规则集还是插件，如果依赖包以eslint-config-开头，那么它就是规则集，例如eslint-config-airbnb；如果依赖包以eslint-plugin-开头，那么它就是插件，如eslint-plugin-vue。当我们引入规则集合或是插件时，需要将eslint-config-或eslint-plugin-省略掉。
• 在 extends 导入规则集合或是插件时，以[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue/)为例，我们是这样导入的extends: ['plugin:vue/vue3-essential']，可以看到插件名vue后面带有/vue3-essential，其实插件名或者规则集合名后面的/*****就是指定的配置项，查看 eslint-plugin-vue 配置项，其他的插件和规则集合都能通过查看源码的方式找到有哪些配置项。
• 如果 extends 导入的规则集合有规则冲突，会按照 extends 中设置的顺序，覆盖前面的规则集合中的相同规则。

以下是我的详细配置：

module.exports = {
  root: true,
  parser: 'vue-eslint-parser', // 它是专门针对 Vue 单文件组件编写的解析器
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    './eslintrc-auto-import.json', // 此规则是自动按需加载时防止 Eslint 校验不通过
    'airbnb-base', // airbnb 代码风格
    'plugin:vue/vue3-essential', // 使用 eslint-plugin-vue 中 vue3-essential 配置项的规则集合
    'plugin:prettier/recommended', // 使用 eslint-plugin-prettier 中 recommended 配置项的规则集合
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest', // 指定要解析的 ECMAScript 版本
    sourceType: 'module', // 指定 ECMAScript 模块的类型
    parser: '@typescript-eslint/parser', // 指定解析器
  },
  plugins: ['vue', '@typescript-eslint'], // 导入 eslint-plugin-vue 和 @typescript-eslint/eslint-plugin
  rules: {
    // 规则配置
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'import/no-extraneous-dependencies': 0,
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['index', '403', '404', '500'], // 需要忽略的组件名
      },
    ],
    // 处理 prettier 和 eslint 冲突的规则
    'prettier/prettier': [
      'error',
      {
        printWidth: 80,
        singleQuote: true,
        semi: true,
      },
    ],
  },
};

Prettier

1. 安装相关依赖 - pnpm install eslint-plugin-prettier prettier eslint-config-prettier -D
2. 增加配置文件.prettierrc.cjs/.prettierrc.js

module.exports = {
  // 每一行的宽度(显示的字符数)
  printWidth: 80,
  // tab健的空格数
  tabWidth: 2,
  // 是否在对象中的括号之间打印空格，{a:5}格式化为{ a: 5 }
  bracketSpacing: true,
  // 箭头函数的参数无论有几个，都要括号包裹
  arrowParens: 'always',
  // 换行符的使用
  endOfLine: 'lf',
  // 是否用单引号， 项目中全部使用单引号
  singleQuote: true,
  // 对象或者数组的最后一个元素后面是否要加逗号
  trailingComma: 'all',
  // 是否加分号，项目中统一加分号
  semi: true,
  // 是否使用tab格式化： 不使用
  useTabs: false
};

1. 修改 Eslint 配置集成 Prettier，相关配置已在 Eslint 部分贴出

相关依赖

• eslint-plugin-prettier- 将 Prettier 的格式化规则集成到 ESLint 中进行校验
• eslint-config-prettier- 为了避免与 Prettier 规则产生冲突而存在的，它会关闭 ESLint 中与 Prettier 冲突的规则，从而保证规则的一致性

至此使用 Eslint 和 Prettier 进行代码风格控制就已经配置完成，还有一点需要补充，就是配置哪些文件可以不进行代码风格检验，在项目创建.eslintignore和.prettierignore，文件内容一致，配置如下：

node_modules
.DS_Store
dist
dist-ssr
*.local
*.d.ts

Git 提交规范

commit 前格式化代码

借助husky和lint-staged即可实现

• husky - 让配置 git 钩子变得更简单的工具，支持所有的 git 钩子。
• lint-staged - 专门用于在通过 git 提交代码之前，只对变更的文件进行格式化，配合 git hooks 使用，可以给对即将提交的代码进行格式化，格式化成功后再提交代码。

安装：pnpm i husky lint-staged -D 初始化：pnpx mrm@2 lint-staged，在此过程中会做以下几件事

• 往package.json里的scripts里加上"prepare": "husky install"脚本
• 往package.json里增加lint-staged配置项，官方生成的代码如下：

"lint-staged": {
  "*.js": "eslint --cache --fix",
  "*.{js,css,md}": "prettier --write"
}

• 往根目录新建.husky文件夹，里面的pre-commit已经自动帮我们集成了npx lint-staged指令

至此，其实已经完成了提交前格式化代码，但是我们还需要修改package.json里增加lint-staged配置项，让它支持格式化更多的文件类型

"lint-staged": {
    "*.{js,ts,jsx,tsx,vue,less,css}": "eslint --cache --fix"
  }

commit message 规范

commit message 一般这样组成<type>(<scope>): <subject>，在团队协助过程中符合标准、描述准确的提交能够更高效的进行开发。 这是我们使用的是社区最流行、最知名、最受认可的 Angular 团队提交规范。

1. 安装相关依赖：pnpm install @commitlint/cli @commitlint/config-conventional -D
2. 在根目录下新建.commitlintrc.cjs配置文件

/**
 * build : 改变了build工具 如 webpack
 * ci : 持续集成新增
 * chore : 构建过程或辅助工具的变动
 * feat : 新功能
 * docs : 文档改变
 * fix : 修复bug
 * perf : 性能优化
 * refactor : 某个已有功能重构
 * revert : 撤销上一次的 commit
 * style : 代码格式改变
 * test : 增加测试
 */
module.exports = {
  extends: ['@commitlint/config-conventional'], // 使用官方的规则扩展
  rules: {
    'subject-case': [2, 'always', 'sentence-case'], // message subject 部分使用的规则规则
    // message tyoe 部分使用的规则规则
    'type-enum': [
      2,
      'always',
      ['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test'],
    ],
  },
};

1. 结合上面的husky增加一个钩子：pnpx husky add .husky/commit-msg
2. .husky文件夹生成commit-msg文件后，再去修改里面的脚本，将undefined修改为npx --no-install commitlint --edit $1

接下来就可以去试试输入不符合规则的commit message还让不让提交啦！

版本控制 standard-version —— 2023.5.9 更新

仓库地址

• 安装 - pnpm install standard-version -D
• 配置命令行 - "release": "standard-version"

配置完成后直接运行pnpm run release命令后就会生成CHANGELOG.md文件并修改package.json中的版本号然后提交

配置文件：

module.exports = {
  // 配置哪些类型的 commit 写入 CHANGELOG.md 文件
  "types": [
    { "type": "feat", "section": "✨ Features | 新功能" },
    { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
    { "type": "init", "section": "🎉 Init | 初始化" },
    { "type": "docs", "section": "✏️ Documentation | 文档" },
    { "type": "style", "section": "💄 Styles | 风格" },
    { "type": "refactor", "section": "♻️ Code Refactoring | 代码重构" },
    { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
    { "type": "test", "section": "✅ Tests | 测试" },
    { "type": "revert", "section": "⏪ Revert | 回退", "hidden": true },
    { "type": "build", "section": "📦‍ Build System | 打包构建" },
    { "type": "chore", "section": "🚀 Chore | 构建/工程依赖/工具" },
    { "type": "ci", "section": "👷 Continuous Integration | CI 配置" }
  ],
  // 跳过生成 CHANGELOG.md 文件
  "skip": {
    "changelog": true
  }
}

增加命令行用于直接升级major、minor、patch版本

"scripts": {
    "release-major": "standard-version --release-as major",
    "release-minor": "standard-version --release-as minor",
    "release-patch": "standard-version --release-as patch"
  },

介绍下这三个版本，在软件的版本号命名中，通常采用三个数字进行标识：major version（主版本号）、minor version（次版本号）和patch version（补丁版本号），分别表示软件的重大更新、较小更新和错误修复等级。

• 主版本号（major version）：一般意味着软件中有较大的变更，包括新增功能、API 的重大变更以及不兼容的修改。主版本号是自己定义的，通常会随着软件大的结构变化而增加。
• 次版本号（minor version）：意味着软件中有较小的变更，例如新增功能、特性和改进等。次版本号通常在软件发布时加1。
• 补丁版本号（patch version）：修复软件中存在的错误和漏洞，不会对已有的功能或API做出不兼容的修改。补丁版本号一般在修复该版本的 bug 后加1。

例如，一个版本号为1.2.3的软件，其主版本号为1，次版本号为2，补丁版本号为3。当软件的某个功能发生了较大变化时，需要不兼容的修改时，应该升级主版本号；当新增了一些功能或者做了一些改进时，则应该升级次版本号；当只是修复了一些错误时，则应该升级补丁版本号。

像使用组件一样使用 SVG 图片

1. 安装vite-svg-loader：pnpm install vite-svg-loader -D
2. vite.config.ts增加配置

+import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [
+  	svgLoader(),
  ]
})

1. vite-env.d.ts/env.d.ts文件增加配置，解决引入SVG图片时报错

declare module '*.svg?component' {
  import {DefineComponent} from 'vue';
  const component:DefineComponent<{}, {}, any>;
  export default component;
}

1. 导入SVG时，后缀名加添加?component方可直接当成组件使用

Tailwind CSS框架

官方文档 官方的介绍是”无需离开您的HTML，即可快速建立现代网站“，经过我的体验下来，前期的可能需要经常花费事件翻阅文档，但是熟练之后可以不用频繁切换文件输入位置，加快页面的开发。 这里我们采用postcss的方式来进行配置，因为 vite 创建的项目会默认安装postcss

1. 安装：pnpm install tailwindcss postcss autoprefixer -D
2. 初始化Tailwind CSS：pnpx tailwindcss init，这一过程会生成Tailwind CSS的配置文件tailwind.config.js
3. 将Tailwind CSS添加到postcss配置文件中
   1. 根目录下创建postcss.config.js文件
   2. 添加Tailwind CSS

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

1. 修改tailwind.config.js文件，定义哪些文件可以使用
2. /src/assets中创建tailwind.css，将@tailwind指令添加到 CSS 中

@tailwind base;
@tailwind components;
@tailwind utilities;

1. mian.ts中导入tailwind.css

接下来就可以愉快的使用Tailwind CSS了，这里建议给 VsCode 安装 Tailwind CSS IntelliSense 插件，以此来获得更好的智能代码提示，定义 class 时，先按空格应该就能看到代码智能提示。

Axios

官方文档 这里我只做了最简单的封装，因为我还不知道如何才能封装一个算得上好用的axios😅

1. 安装：pnpm install axios
2. 新建/src/api文件夹，用来存放axios封装和http请求，下面就是我简单的axios封装

import axios, {
  AxiosResponse,
  AxiosError,
  InternalAxiosRequestConfig,
} from 'axios';

const BASE_URL_PREFIX = import.meta.env.VITE_API_BASEURL;

const axiosInstance = axios.create({
  baseURL: BASE_URL_PREFIX,
  timeout: 1000 * 30,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    return config;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  },
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    if (response.status === 200) {
      return response.data;
    }
    return response;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  },
);

const service = {
  get<T = any>(url: string, data?: object): Promise<T> {
    return axiosInstance.get(url, { params: data });
  },

  post<T = any>(url: string, data?: object): Promise<T> {
    return axiosInstance.post(url, data);
  },

  put<T = any>(url: string, data?: object): Promise<T> {
    return axiosInstance.put(url, data);
  },

  delete<T = any>(url: string, data?: object): Promise<T> {
    return axiosInstance.delete(url, data);
  },

  upload: (url: string, file: FormData | File) =>
    axiosInstance.post(url, file, {
      headers: { 'Content-Type': 'multipart/form-data' },
    }),
};

export default service;

CSS 预编译

我这里使用的是 Less

1. 安装：pnpm install less -D
2. 配置：vite.config.ts增加配置

export default defineConfig({
  css: {
    less: {
      modifyVars: {
        'arcoblue-6': '#f85959',
      },
      javascriptEnabled: true,
    },
  }
})

支持 JSX 写法

1. 安装 @vitejs/plugin-vue-jsx：pnpm install @vitejs/plugin-vue-jsx -D
2. vite.config.ts增加配置

+import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [
+  	vueJsx(),
  ]
})

VueUse

官方文档 VueUse是一个响应式的Vue实用程序的合集，使用它，我们可以把各种各样的东西变成响应式而不用我们手动编写 hook 安装：pnpm i@vueuse/core -D PS：VueUse的自动按需加载在上面章节有介绍，此处不赘述

Vue 全家桶套餐

Vue Router

官方文档

1. 安装pnpm install vue-router
2. 新建/src/router文件夹
   1. /src/router/guard文件夹用来路由拦截相关代码
   2. /src/router/modules文件夹用来定义不同模块的路由
   3. /src/router/modules-index.ts 用于批量导出 modules 文件夹里的所有路由
   4. /src/router/index.ts 汇总路由配置后导出路由实例
3. main.ts文件中将配置好的router挂载到Vue上

import { createApp } from 'vue';
+import router from './router';

const app = createApp(App);

+app.use(router);

app.mount('#app');

最后路由监听我们采用发布订阅模式等方式来实现，不同地方单独监听路由会浪费渲染性能，/src/utils文件夹下新建router-listener.ts文件，代码如下：

import mitt, { Handler } from 'mitt';
import type { RouteLocationNormalized } from 'vue-router';

const emitter = mitt();

const key = Symbol('ROUTE_CHANGE');

let latestRoute: RouteLocationNormalized;

export function setRouteEmitter(to: RouteLocationNormalized) {
  emitter.emit(key, to);
  latestRoute = to;
}

export function listenerRouteChange(
  // eslint-disable-next-line no-unused-vars
  handler: (route: RouteLocationNormalized) => void,
  immediate = true,
) {
  emitter.on(key, handler as Handler);
  if (immediate && latestRoute) {
    handler(latestRoute);
  }
}

export function removeRouteListener() {
  emitter.off(key);
}

然后在路由发生变化时调用setRouteEmitter 最后想要监听路由的话直接导入listenerRouteChange函数，并传入路由发生变化时需要执行的回调函数即可 PS：Vue Router 的自动按需加载在上面章节有介绍，此处不赘述

Pinia

官方文档

1. 安装pnpm install pinia
2. 新建/src/store文件夹，里面存放全局状态管理相关配置并导出

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

1. main.ts文件中将配置好的store挂载到Vue上

import { createApp } from 'vue';
+import store from './store';

const app = createApp(App);

+app.use(store);

app.mount('#app');

PS：Pinia 的自动按需加载在上面章节有介绍，此处不赘述

页面加载进度条

安装 Nprogress 以及 @types/npprogress，因为是 TypeScript 项目，所有需要多安装一个包

1. 安装：pnpm install nprogress、pnpm install @types/nprogress -D
2. 配置：/src/router/guard中的路由守卫增加配置

import Nprogress from 'nprogress';
import 'nprogress/nprogress.css';

function setupPageGuard(router: Router) {
  router.beforeEach(async (to) => {
    if (!Nprogress.isStarted()) {
      Nprogress.start();
    }
  });

  router.afterEach(() => {
    Nprogress.done();
  });
}

写在最后

• standard-version 生成 changelog
• markdown文件支持
• 单元测试
• 等等......

以上就是我后续想要增加的功能，要是各位还有补充，欢迎大家提出👏，后续有功能更新的话，此文也会同步更新，希望大家能收藏点赞，方便后续查看😊。

文章较长，在写这篇文章的过程中可能有些依赖或库又双叒叕更新了😄，要是大家发现了麻烦在评论区或者 Issue 踢我一下💪。

共同成长，无限进步！！！