该模板提供了 Vue3+Vite+Typescript 的模块化开发的基础框架,Vue 文件使用<script setup>
SFCs 语法。
!先运行项目开发模式!
请先
npm install
(或任何其它包管理工具)并npm run dev
以自动生成所有的ts
声明文件;
第一次加载可能会需要一点时间;
模块缺少的类型,开发模式下打开对应模块的页面之后会加载出来;
npm install degit -g
degit github:darkXmo/vue3-template vue3-template
cd vue3-template
npm install
- VSCode + Volar
- VSCode 提供了最佳的 Vue3 语法支持,搭配 Volar 插件(Vue Language Features (Volar))可以在
template
和script
标签之间建立联系,同时为props
定义的参数变量提供语法补充。前提是你使用setup
+composition api
而不是老旧的component api
。
- VSCode 提供了最佳的 Vue3 语法支持,搭配 Volar 插件(Vue Language Features (Volar))可以在
本项目是系统开发而非组件或库的开发,因此除了质量管理插件之外,所有会影响打包的插件都默认视为
dependencies
。
-
vue-router
Vue 页面路由 -
element-plus
默认外部公共组件库,可手动替换成其它例如ant-design-vue
的组件库 -
Vite
自动引入 - 使用详情可参照本文unplugin-auto-import
全局自动隐式import
导出 - 通常用于导入vue
vue-router
的导出 - 已配置unplugin-vue-components
全局自动隐式import
Vue
组件 - 通常用于导入element-plus
等公共组件库的组件 - 默认配置element-plus
unplugin-auto-import
和unplugin-vue-components
会分别生成auto-imports.d.ts
和components.d.ts
声明文件。 -
less
css 样式语言 -
rollup-plugin-visualizer
打包的时候生成各模块的可视化占用比例。 -
vite-plugin-svg-icons
- 引入svg
原生图标 - 已配置,搭配SvgIcon
组件使用
@types/lodash-es
和rollup
这两个库事件上不需要安装,只不过不安装会提示peerDependencies
错误,实际用不上
-
husky
劫持git
事件,用于在git
的各个阶段进行行为检测 -
commitlint
- git commit 管理,搭配git-cz
实现格式规范化的git commit
@commitlint/cli
@commitlint/config-conventional"
cz-conventional-changelog
-
lint-staged
+prettier
在git commit
的时候对代码进行格式化,才用prettier
的默认方案进行。 -
git-cz
- 请使用npm run commit
代替git
命令,详情参照package.json
中的scripts.commit
可以在 src/index.ts
中开启或关闭 mock
模拟 XHR
/ Axios
请求;
vue3
允许在外部ts
文件中使用ref
和reactive
,可以直接使用ref
在ts
中,在保留变量响应式的前提下,定义全局变量然后在vue
或ts
文件中引用,大多数情况不需要画蛇添足添加全局状态管理器。
- 解耦合
- 可复用
- 缓存
- 任意模块文件大小不能超过 500 行,对于大型模块应当拆分成多个小模块以减小复杂度。
- 原则上不需要任何可复用的复杂组件,如果有相同相似功能的组件,应当直接拷贝成两个互不影响的组件。
- 对于可以复用的小组件,应当放在
@/components
文件夹中。在@/components
中的文件会被全局注册,无需import
即可直接使用。
- 对于可以复用的小组件,应当放在