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

土豆鸡蛋

2023-08-29 帮助3人

大家好，我是爱吃土豆和鸡蛋的小小前端程序猿，今天带来的是《手把手教你创建自己的 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 - 页面视图

项目初始化

先全局安装 pnpm：npm install -g pnpm
使用 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

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

首先需要来安装 Eslint 依赖 - pnpm install eslint -D
接下来进行 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

修改代码风格为 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

安装相关依赖 - pnpm install eslint-plugin-prettier prettier eslint-config-prettier -D
增加配置文件.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
};

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

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 团队提交规范。

安装相关依赖：pnpm install @commitlint/cli @commitlint/config-conventional -D
在根目录下新建.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'],
    ],
  },
};

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

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

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

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

 import svgLoader from 'vite-svg-loader';

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

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

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

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

Tailwind CSS框架

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

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

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

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

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

mian.ts中导入tailwind.css

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

Axios

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

安装：pnpm install axios
新建/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

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

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

支持 JSX 写法

安装 @vitejs/plugin-vue-jsx：pnpm install @vitejs/plugin-vue-jsx -D
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

官方文档

安装pnpm install vue-router
新建/src/router文件夹
1. /src/router/guard文件夹用来路由拦截相关代码
2. /src/router/modules文件夹用来定义不同模块的路由
3. /src/router/modules-index.ts 用于批量导出 modules 文件夹里的所有路由
4. /src/router/index.ts 汇总路由配置后导出路由实例
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

官方文档

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

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

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 项目，所有需要多安装一个包

安装：pnpm install nprogress、pnpm install @types/nprogress -D
配置：/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文件支持
单元测试
等等......

最后最后引用影视飓风的一句slogan：共同成长，无限进步！！！

这篇好文章是转载于：学新通技术网