Vue 3.2 + TypeScript + Pinia + Vite3 + Element-Plus + vueuse + unocss + vitest 管理系统

在线预览/仓库地址

link: https://v3-admin.netlify.app
github: https://github.com/hdw0504/v3-admin

其余模板

nuxt3 + element plus 模板
link: https://element-plus-nuxt3.netlify.app
github: https://github.com/hdw0504/el-plus-nuxt3

项目前身今世

基于 vitesse-lite
复刻 Geeker-Admin
该后台算是 Geeker-admin 的精简版 + vueuse + unocss 把无用的功能删掉出来，只有最干净的架子
包管理使用 pnpm，使用 nr up 更新依赖（nr 是一个包管理工具名为 ni 的指令）

项目技术栈

• Vue 3.2
  • 使用 script setup、composition api
  • 使用 mitt 用于事件总线（vue2 的 eventBus）
• TypeScript
  • 使用 ts 并开启严格模式
• Pinia
  • 使用 setup store 抛弃厚重的 vuex 写法 (拜拜了 mutation)
• Vite3
  • 配置了自动注册、跨域代理、打包分析、gzip压缩
• vueuse
  • 自动引入vueuse，多处使用如 useMagicKeys whenever useDark useToggle useCssVar 等
• unocss
  • 整个项目的样式全用 unocss 编写，简洁代码
• Element-Plus
  • 无需手动引入，按需加载，支持定制主题和暗黑模式
• vitest
  • 支持 vitest 编写测试用例
• pnpm
  • 项目的包管理工具

项目截图

TODO:

• 打包优化
  • 使用按需注册icon，包体积减少200kb
• 开发优化
  • 预加载样式和必备依赖
  • 无缓存时加载太久（也许是 autoimport + scss 主题导致）
• 定制不同颜色的背景和主题

unocss

如何 import 别的css文件（里面包含unocss的--at-apply）
在 sass 未来版本中会逐步用 @use 来代替 @importIntroducing Sass Modules

// custom element css
@use './element.scss' as *;
// reset style sheet
@use './reset.scss' as *;
// css common style sheet
@use './common.scss' as *;
// css root var
@use './root.scss' as *;
// css transiton
@use './transition.scss' as *;
// import element dark and light theme
// 里面有暗黑和默认的 element 的默认颜色
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

在 scss 中使用 @apply 会有点问题 @apply bug issue
解决方案：使用 --at-apply: 代替 @apply

<style scoped>
[redfoo] {
-  @apply text-red;
+  --at-apply: text-red;
}
[bluefoo] {
-  @apply text-blue;
+  --at-apply: text-blue;
}
</style>

// unocss.config.ts
transformers: [
  transformerDirectives()
]

Pinia

使用 setup store 替代 option store (vuex) 的写法 setup-stores
官网话术：
在 Setup Store 中：

• ref() 就是 state
• computed() 就是 getters
• function() 就是 actions

Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。不过，请记住，使用组合式函数会让 SSR 变得更加复杂。

Element Plus

主题配置参考 element-plus-vite-starter
elment plus 自定义主题文档
本项目不支持直接在页面配置主题颜色 (意思就是不支持动态配置)
支持配置css颜色修改主题色 (暗黑模式和默认模式可使用不同主题色)
styles/element/dark.scss => 修改暗黑主题色配置
styles/element/index.scss => 修改默认主题色配置
styles/element.scss => 修改全局 element 组件样式
styles/root.css => 自定义全局css变量

已解决问题

解决 unplugin-auto-import 在加载登录页的时候并未注册 ElMessage 和 ElNotification

确保去掉引入文件(import xxx from 'element-plus') 删除或注释掉手动引入的组件 重启项目就没问题了 el-plus-auto-import-solution

非全局引入el-icon时，解决异步 icon（<componnent :is="icon" />）不会自动引入 icon 问题

解决方案1

• 参考官方issue Dynamic icon components

解决方案2

• ni -D @iconify/vue 文档
• 使用 <Icon icon="mdi-light:home" /> 他会根据你的 iconname 请求服务获取 svg，然后存储到localstoreage，供下次使用
• 因为为了减少无用icon占用打包容量 (打包后少了200kb) ，没有全局注册 icon 组件。所以当用到 icon 的时候不能直接把icon name直接写到组件的icon属性中（如 <el-button nicon="Edit" /> 这样子是不支持的），需要手动引入图片icon文件，参考 pages/login/components/loginForm.vue