Vite系列(二)：我基于Vite搞了一个项目模板

因卓诶-原文链接

vue3-vite2-ts-template

托管地址: github-vue3-vite2-ts-template

• [x] 使用最新版本的 vite 和 vue3
• [x] antdv 真正意义上的按需加载组件以及组件css
• [x] git 提交前的 lint-stage+husky 校验和美化代码（prettier）, 多人协作风格统一
• [x] 开发预设 eslint 校验和自动修复以及 Editorconfig
• [x] 自带开发常用依赖，antdv, axios, day, querystring…
• [x] 适合中小项目的 typescipt 的 mvc 风格架构
• [x] 工具方法贯彻 hook 风格，且预装 vueuse
• [x] scss 基本工具库封装，页面和页面无需引入，直接使用预定义的全局变量/函数
• [x] vite/rollup 打包优化
• [x] storage,cookie TS版本的模块化方案
• [x] 预设 Pinia 状态管理的模块化以及类型声明
• [x] 预设开发环境的 vite-plugin-mock
• [x] 预设自动装载路由 vite-plugin-pages
• [ ] SSR/CSR 优化
• [ ] 业务组件/type 类型文档自动生成，且在启动开发服务器时，自动打开 doc
• [ ] 动画方案
• [ ] 预装业务常用的 webcomponents 组件（团队自己开发组件库）

命令

启动/打包 命令

技术栈：

1. vue3
2. vueRouter4
3. pinia
4. typescript

命令行

通过安装Tool，来可视化地使用模板，因为仓库中的模板大多数都不会全部用到，你可以通过tool去按需引入它们

npm i enjoy-project-tool -g

创建模板

当然，作为模板的伴生工具，我还会继续维护并且持续提出新的feature来减轻我们开发负担

Tool是使用TS开发的，如果你感兴趣可以提pr，这是Tool的仓库

类型文档/组件文档

文档待补充，暂定使用

1. dumi作为组件库文档

代码提交

旧版本的husky和新版还是有很多不一样的，所以如果你以前用过husky那么你要在代码提交这里做更多逻辑的话，可以去看看最新的文档。

模板中只拦截了pre_commit这个钩子，目标就是