前言

从两三年前开始接触前端起，我发现每次开发一个新的前端项目都要从头到尾进行配置，而我自己是一个比较强迫症的人，喜欢把项目架构地优雅，配置各种辅助插件，于是导致事倍功半，毕竟最后给人看的就是一个界面。因此，在半年前我创建了一个项目Vue-Template，它主要基于Vue3+Typescript开发，下面主要介绍我在这个项目中配置的一些心得，顺便推广一波~

文件结构

该项目的文件结构如下，列出项目中主要使用的各个模块：

├─.husky          // husky模块
├─.eslintrc       // 代码检查模块
├─.prettierrc.cjs // 格式化模块
├─jest.config.js  // 测试模块
├─vite.config.ts  // 运行打包模块
├─public          // 静态资源文件
└─src
    ├─apis        // 请求模块
    ├─assets      // 资源模块
    ├─components  // 组件模块
    ├─layout      // 布局模块
    ├─pages       // 视图模块 (views)
    ├─routers     // 路由模块
    ├─stores      // 状态管理模块
    ├─styles      // 样式模块
    ├─types       // 类型模块
    └─utils       // 工具模块

各模块介绍

husky

.husky文件夹配置了husky模块，可以定义一些git命令的hooks，比如创建名为pre-commit的文件填写如下内容，可以在git commit前执行命令npm run format，这是为了使得

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

npm run format

eslint

.eslintrc文件配置了eslint模块，可以自行在其中添加一些规则，如下面的一条规则能关闭any类型的警告。

  rules: {
    "@typescript-eslint/no-explicit-any": 0,
  },

prettier

.prettierrc文件配置了代码的格式化要求，比如下面的内容。它能够保证每个人在各自的编辑器中经过格式化代码一致，毕竟每个人编辑习惯不同。

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
};

jest

jest.config.js文件是测试配置，一个jest模块就包含了Mocha+Chai两个模块的功能，且具备覆盖率测试等功能。使用该模板时，该文件可不必理会。

vite

vite是目前一个比较主流的项目创建、运行、打包的模块，内嵌了rollup来配置打包项，不再使用原来的vue-cli-service通过webpack打包。

在vite.config.ts中一般可以配置css预处理，代理，另命名等。

apis

请求模块主要封装了axios这一模块，其中包含了一个基本的封装文件base.ts，导出了一个service对象。在该文件夹可进行统一的请求拦截，统一驼峰命名，错误响应处理，登录拦截等。这种解耦的思想非常重要。

在模板中给出了一个example.ts文件，通过导入base.ts的service来创建了一个样例请求函数，如果一个函数的请求参数或响应参数过多，我们可以定义一个类型对象：

interface GetExampleReq {
  id: string;
}

interface GetExampleRes {
  id: string;
  name: string;
}

export async function getExample(params: GetExampleReq) {
  return service.get<any, GetExampleRes>("/example", {
    params,
  });
}

components

组件模块不再赘述，按官方文档的标准完成。

layout

布局模块是每个页面的公共部分，比如该项目模板中包含了header.vue和footer.vue，将页面公共的header和footer组件化，以便更好的解耦和组装。

它的使用有两种方式，其一是修改App.vue文件夹，按如下方式进行包裹：

<template>
  <Layout>
    <router-view />
  </Layout>
</template>

其二是修改router文件夹，进行如下配置，该配置主要针对有额外登录页面的项目：

const routes = [
  {
    path: "/login",
    component: Login,
  },
  {
    path: "/home",
    component: Layout,
    children: {
        ...
    }
  },
];

pages

视图模块，在原本的vue模板中命名为views。关于这一模块，值得一提的是如果页面较多，建议按照路由的嵌套关系创建文件夹。

routers

路由模块，本模板默认使用history路由，一般默认创建项目采用的是hash路由，关于二者差别，可自行百度。

在该模块也可以配置统一路由守卫，比如登录拦截。

stores

状态管理是前端项目的一个重要部分，在很多时刻我们希望不同页面之间共享数据，这时候就用到了状态管理，起初vue项目搭配的是vuex，但现在pinia已经被官方认可，并纳入体系中。具体用法见pinia官网。

styles

样式模块。在一些项目中，将样式模块合入了assets文件夹中，其实都可以，而在我的模板中这么做是要添加一些全局的样式、覆盖的样式、变量样式等，将不同样式进行分类处理。

types

类型模块。该模块的存在是为了保证代码和项目的健壮性，比如我常常会在该文件中增加一个entity.d.ts文件，用来添加一些实体对象类型，和数据库表相对应，这也是为了迎合typescript语言的严谨性。

// entity.d.ts
export interface IUser {
    id: number;
    name: string;
    age: number;
}

utils

工具函数模块。一些常见的工具函数比如处理字符串、数组、日期，或者引入一些其他模块在此进行封装。

而Vue-Template中额外针对工具函数的样例写了单元测试，一方面能避免直接运行整个页面才能检验函数运行正确性，另一方面增加项目完善度。

最后

其实项目Vue-Template本身也是我在开发过程中衍化的产物之一，就项目架构上还有很多值得改进的地方，比如如果我们的项目中用到一些变量，就可以考虑增加文件夹constants；比如项目在不同环境下需要用到不同变量，就可以学习一下vite如何配置环境变量；还有一方面是对package.json的使用，可以自行定义一些方便的命令。

Vue-Template 集成多模块的模板项目

前言