Vite系列（⼆）：我基于Vite搞了⼀个项⽬模板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 风格，且预装
[x] scss 基本⼯具库封装，页⾯和页⾯⽆需引⼊，直接使⽤预定义的全局变量/函数
[x] vite/rollup 打包优化
[x] storage,cookie TS版本的模块化⽅案
[x] 预设 Pinia 状态管理的模块化以及类型声明
[x] 预设开发环境的
[x] 预设⾃动装载路由
[ ] SSR/CSR 优化
[ ] 业务组件/type 类型⽂档⾃动⽣成，且在启动开发服务器时，⾃动打开 doc
[ ] 动画⽅案
[ ] 预装业务常⽤的 webcomponents 组件（团队⾃⼰开发组件库）
命令
启动/打包命令
技术栈：
1.
2.
3. pinia
4. typescript
命令⾏
通过安装Tool，来可视化地使⽤模板，因为仓库中的模板⼤多数都不会全部⽤到，你可以通过tool去按需引⼊它们npm i enjoy-project-tool -g
创建模板
当然，作为模板的伴⽣⼯具，我还会继续维护并且持续提出新的feature来减轻我们开发负担
Tool是使⽤TS开发的，如果你感兴趣可以提pr，这是
类型⽂档/组件⽂档
⽂档待补充，暂定使⽤
前端页面模板1. 作为组件库⽂档
代码提交
旧版本的husky和新版还是有很多不⼀样的，所以如果你以前⽤过husky那么你要在代码提交这⾥做更多逻辑的话，可以去看看最新的⽂档。
模板中只拦截了pre_commit这个钩⼦，⽬标就是在pre_commit的时候对代码进⾏lint和⾃动修复以及美化，⽽且仅要对暂存区的⽂件lint，所以使⽤了lint-staged。这个组合太常见了，有需求的开发者可以再这个上层定义⼀些有趣的功能提pr。
还有⼀个需求是校验git commit message的规范，但是对于⼩团队来讲，校验这个规范没有太⼤必要，也暂时不会对团队带来好处，所以爱⿎捣的可以去⿎捣哈。
可以推荐团队成员使⽤
vscode 开发⼩指南
推荐使⽤ Volar 插件进⾏开发，如果你的 IDE 是 Jetbrains 系列的，那么你可能不太需要这个插件，如果你是 vscode 推荐使⽤ volar。使⽤ volar，不仅可以在 vue 开发上和jetbrains 的表现⼀致，还可以得到更完善 vue3 的⽀持，甚⾄⾮常新/在草案的语法糖都能够快速享受到。
此模板对于vscode有天然的⽀持，如果你使⽤vscode，就能使⽤模板⾃带的vscode配置，⽐如说保存⾃动lint&fix&prettier或者其他有意思的功能。
1. 有那么⼀点智能的代码模板
模板中⾃带了若⼲个vscode的code-snippets，snippets将会持续更新，它和模板深度贴合，可以帮助你摆脱繁琐的开发。下⾯就⼀⼀描述⼏个snippets的作⽤:
model-init-type
初始化@types/model/api的提⽰⼯具，⾃动声明命名空间以及导出
model-init-api
初始化model下的api类，⾃动引⼊与之匹配的type类型声明⽂件以及其他可能⽤到的依赖
model-init-cache
初始化model下的cache类，⾃动引⼊与之匹配的type类型声明⽂件以及其他可能⽤到的依赖
controller-init 初始化控制器类

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。