「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
前言
欢迎star！！！
这里感谢下chris-zhu大佬！！么么哒
该项目用的是vite2 + vue3 + ts
还用到许多vite插件，来提高开发效率
- vite-plugin-md
- vite-plugin-vue-layouts (约定式路由，layout布局)
- vite-plugin-pages (约定式路由，页面)
- vite-plugin-vue-setup-extend (给vue组件配置name属性)
- unplugin-vue-components（自动导入组件）
- unplugin-auto-import（自动导入Api）
大概来讲一下用到的一些插件
pinia
Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。
Pinia.js 有如下特点：
- 完整的 typescript 的支持；
- 足够轻量，压缩后的体积只有1.6kb;
- 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
- actions 支持同步和异步；
- 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
- 无需手动添加 store，store 一旦创建便会自动添加；
unocss
UnoCSS 是一个原子 CSS 引擎
unocss有如下特点：
- 完全可定制- 没有核心实用程序，所有功能都通过预设提供。
- 无需解析，无需 AST，无需扫描，它是即时的（比 Windi CSS 或 Tailwind JIT 快 200 倍）
- ~3.5kb min+gzip - 零依赖和浏览器友好。
- 快捷方式- 动态别名实用程序。
- 属性模式- 在属性中分组实用程序
- 纯 CSS 图标- 将任何图标用作单个类。
- Inspector - 以交互方式检查和调试。
- CSS-in-JS 运行时版本
- CSS 范围
- VS 代码扩展
- CSS 的代码分割 - 为 MPA 提供最小的 CSS。SXCVDFXCVDFXCVDFXCVDFXCVDFXCVDF7
- 库友好 - 将原子样式与您的组件库一起提供并安全地限定范围。
具体的可以自行去看官方文档，这边只做一个介绍
给你们看看我用unocss写的某一个项目文件
vite-plugin-pages
根据指定的目录自动生成路由配置，然后引入使用即可
import generatedRoutes from 'virtual:generated-pages'
const router = createRouter({
history: createWebHistory(),
routes: generatedRoutes
})
还能给路由配置自定义属性哦，例如
<route lang="yaml">
name: name-override
meta:
requiresAuth: true
</route>
layouts也是同理，详情自行看文档哈！
vite-plugin-vue-setup-extend
在用vue3 + ts的时候，想给组件写name属性的话，是否有些蛋疼，得这么写
<script lang='ts'>
export default defineComponent({
name: 'xxx',
....
})
</script>
<script setup lang='ts'>
...
</script>
加上这个插件的话，就简单很多了
<script lang='ts' setup name='xxx'>
....
</script>
unplugin-auto-import
相信你们一看就懂哈，不需要import 相关 API了
结语
还有一些插件就不讲了哈，如果有人想看，我会考虑补上。
如果你们有更多好用的vite插件，欢迎评论区分享进来，我会加到我模板里面。
或者文章有什么问题，也欢迎评论区交流，感谢！
哈哈。在放一遍项目链接。
欢迎star！！！
