如上图,表示 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