前端工程化项目

Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求，如果想构建 Vite 3 + Vue 3 + JavaScript 项目，那社区模板不太能满足您的需求，因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建，对于不熟悉 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。

本文章篇幅较长，从以下几个方面展开：

• 基础搭建
• 代码规范
• 提交规范
• 自动部署

# npm 6.x
npm create vite@latest vite-vue-js-template –template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-vue-js-template — –template vue

# yarn
yarn create vite vite-vue-js-template –template vue

# pnpm
pnpm create vite vite-vue-js-template –template vue
复制代码

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

# 打开项目cd <your-project-name># 安装依赖npm install# 启动项目npm run dev复制代码

Vite 配置文件 vite.config.js 位于项目根目录下，项目启动时会自动读取。

本项目针对公共基础路径、自定义路径别名、服务器选项、构建选项等做了如下基础配置：

import { defineConfig } from 'vite';import { resolve } from 'path';import vue from '@vitejs/plugin-vue';export default defineConfig({    base: './',    plugins: [      vue(),    ],    resolve: {      alias: {        '@': resolve(__dirname, './src') ,      },    },    server: {      // 是否开启 https      https: false,      // 端口号      port: 3000,      // 监听所有地址      host: '0.0.0.0',      // 服务启动时是否自动打开浏览器      open: true,      // 允许跨域      cors: true,      // 自定义代理规则      proxy: {},    },    build: {      // 设置最终构建的浏览器兼容目标      target: 'es2015',      // 构建后是否生成 source map 文件      sourcemap: false,      //  chunk 大小警告的限制（以 kbs 为单位）      chunkSizeWarningLimit: 2000,      // 启用/禁用 gzip 压缩大小报告      reportCompressedSize: false,    },});复制代码

规范目录结构

├── dist/└── src/    ├── api/                       // 接口请求目录    ├── assets/                    // 静态资源目录    ├── common/                    // 通用类库目录    ├── components/                // 公共组件目录    ├── router/                    // 路由配置目录    ├── store/                     // 状态管理目录    ├── style/                     // 通用样式目录    ├── utils/                     // 工具函数目录    ├── views/                     // 页面组件目录    ├── App.vue    ├── main.js├── tests/                         // 单元测试目录├── index.html├── jsconfig.json                  // JavaScript 配置文件├── vite.config.js                 // Vite 配置文件└── package.json复制代码

集成 Vue Router 路由工具

安装依赖

npm i vue-router@4复制代码

创建路由配置文件

在 src/router 目录下新建 index.js 文件与 modules 文件夹

└── src/    ├── router/    	├── modules/  // 路由模块        ├── index.js  // 路由配置文件复制代码

关于路由表，建议根据功能的不同来拆分到 modules 文件夹中，好处是：

• 方便后期维护
  • 减少 Git 合并代码冲突可能性

export default [  {    path: '/',    name: 'home',    component: () => import('@/views/HomeView.vue'),  },  {    path: '/about',    name: 'about',    component: () => import('@/views/AboutView.vue'),  },];复制代码

import { createRouter, createWebHistory } from 'vue-router';import baseRouters from './modules/base';const routes = [...baseRouters];const router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  routes,  scrollBehavior() {    return {      el: '#app',      top: 0,      behavior: 'smooth',    };  },});export default router;复制代码

根据路由配置的实际情况，需要在 src 下创建 views 目录，用来存储页面组件。

挂载路由配置

在 main.js 文件中挂载路由配置

import { createApp } from 'vue';import App from './App.vue';import router from './router';createApp(App).use(router).mount('#app');复制代码

集成 Pinia 全局状态管理工具

安装依赖

npm i pinia复制代码

创建仓库配置文件

在 src/store 目录下新建 index.js 文件与 modules 文件夹

└── src/    ├── store/    	├── modules/  // 仓库模块        ├── index.js  // 仓库配置文件复制代码

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {  state: () => ({    count: 1,  }),  actions: {    accumulate() {      this.count++;    },  },});复制代码

import { createPinia } from 'pinia';const store = createPinia();export default store;export * from './modules/counter';复制代码

开发中需要将不同功能所对应的状态，拆分到不同的 modules，好处如同路由模块一样。

挂载 Pinia 配置

在 main.js 文件中挂载 Vuex 配置

import { createApp } from 'vue';import App from './App.vue';import store from './store';import router from './router';createApp(App).use(router).use(store).mount('#app');复制代码

集成 TDesign Vue Next 组件库

安装依赖

npm i tdesign-vue-next复制代码

基础使用

import { createApp } from 'vue';import TDesign from 'tdesign-vue-next';// 引入组件库全局样式资源import 'tdesign-vue-next/es/style/index.css';const app = createApp(App);app.use(TDesign);复制代码

按需引入

使用 unplugin-vue-components 和 unplugin-auto-import 来实现自动导入：

npm install unplugin-vue-components unplugin-auto-import -D复制代码

在 Vite 对应的配置文件 vite.config.js 添加上述插件：

import AutoImport from 'unplugin-auto-import/vite';import Components from 'unplugin-vue-components/vite';import { TDesignResolver } from 'unplugin-vue-components/resolvers';export default {  plugins: [    AutoImport({      resolvers: [TDesignResolver({        library: 'vue-next'      })],    }),    Components({      resolvers: [TDesignResolver({        library: 'vue-next'      })],    }),  ],};复制代码

集成 Axios HTTP 工具

安装依赖

npm i axios复制代码

请求配置

在 utils 目录下创建 request.js 文件，配置好适合自己业务的请求拦截和响应拦截：

└── src/	├── api  // 接口    ├── utils/        ├── request.js  // axios 请求库二次封装复制代码

import axios from 'axios';// 创建请求实例const instance = axios.create({  baseURL: '/api',  // 指定请求超时的毫秒数  timeout: 1000,  // 表示跨域请求时是否需要使用凭证  withCredentials: false,});// 前置拦截器（发起请求之前的拦截）instance.interceptors.request.use(  (config) => {    /**     * 在这里一般会携带前台的参数发送给后台，比如下面这段代码：     * const token = getToken()     * if (token) {     *  config.headers.token = token     * }     */    return config;  },  (error) => {    return Promise.reject(error);  },);// 后置拦截器（获取到响应时的拦截）instance.interceptors.response.use(  (response) => {    /**     * 根据你的项目实际情况来对 response 和 error 做处理     * 这里对 response 和 error 不做任何处理，直接返回     */    return response;  },  (error) => {    const { response } = error;    if (response && response.data) {      return Promise.reject(error);    }    const { message } = error;    console.error(message);    return Promise.reject(error);  },);// 导出常用函数/** * @param {string} url * @param {object} data * @param {object} params */export function post(url, data = {}, params = {}) {  return instance({    method: 'post',    url,    data,    params,  });}/** * @param {string} url * @param {object} params */