Day-02 从 0 开始搭建一套规范的 Vue3.x 项目工程环境

如上图，表示 Vite + Vue3 + TypeScript 简单的项目骨架搭建完毕，下面我们来为这个项目集成 Vue Router、pinia、 Plus View Ui Plus、Axios、Dayjs、Stylus/Sass/Less、Commitizen 。

三、修改 Vite 配置文件

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

本项目先做一些简单配置:

        例如：设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。

        例如: Commitizen 提交规范。

关于 Vite 更多配置项及用法，请查看 Vite 官网 vitejs.dev/config/ 。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// ps： 提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
 
function resolve(dir) {
  return path.resolve(__dirname, dir);
}
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@views': resolve('src/views'), // 设置 `views` 指向 `src/views` 目录
      '@api': resolve('src/config/api')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  },
  base: './', // 设置打包路径
  server: {
    // port: 4000, // 设置服务启动端口号
    // open: true, // 设置服务启动时是否自动打开浏览器
    // cors: true // 允许跨域
 
    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

四、规范目录结构

├── publish/
├──.commitlintrc：代码提交规范
├──.eslintrc: 代码风格规范
├──.gitignore: git 仓库忽略文件
├──.stylelintignore: 样式检查忽略文件
├──.stylelintrc: 样式风格规范
└── src/
    ├── assets/                    // 静态资源目录
    ├── config/                    // 配置文件
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── tests/                         // 单元测试目录
├── index.html                     // 项目入口测试
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json