撸了一个基于 vue3,vite2,element plus 的 admin 模板

vue3,vite2 我就不吹了,用过的都说好.话不多说,上链接:

在线预览

仓库地址

这个模板我叫它fuep admin,如果对你有帮助的话,记得给个 star 哦.

快速开始

clone 仓库代码,建议 node 版本 12+

npm i
npm run dev

vscode 插件

• 如果你使用了< script setup>，则需要添加 Volar
• WindiCSS IntelliSense，用于 windicss 的样式提示

工程特性一览

• 自动生成路由
• 自动导入组件
• 支持多个图标库,图标按需加载
• 支持 tailwindcss
• 明暗主题切换
• 导航状态持久化
• 多环境配置
• 支持 svg 组件
• 物料库

自动生成路由

用过 nuxt 的同学肯定知道,路由可以根据你的文件目录生成,这样你就不用在每次新增页面的时候往 route 里面加配置.vite2 当然也有自动生成路由的插件,它支持生成嵌套路由,动态路由等.

vite-plugin-pages

跟自动生成路由搭配的是,自动生成 layout,你可以通过配置 route,指定使用任意 layout.例如,在后台管理系统中,layout 通常由 header,aside 组成.但是像 login 这样的页面就没有 layout.假设,index.vue 需要 layout,login 不需要 layout 你可以这样做:

<!-- layout/default.vue -->
<header />
<aside />
<router-view></router-view>

<!-- layout/pure.vue -->
<router-view></router-view>

<!-- index.vue -->
<template>Index</template>
<route lang="yaml">
    meta:
      layout: default
  </route>

<!-- login.vue -->
<template>Login</template>
<route lang="yaml">
    meta:
      layout: pure
  </route>

自动导入组件

通常,我们使用 componets 中定义的公共组件,需要这样做:

<template>
    <helloWorld/>
</template>
<script>
import { helloWorld } from '@/components/helloWorld.vue'
default export {
    componetns: {
       helloWorld 
    }
}
</script>

现在你只需要:

<template>
    <helloWorld/>
</template>

插件会检测你在 template 中使用到的组件,自动 import 并注册到 componets 中.当然,通过配置你也可以指定其它目录的组件自动导入.

vite-plugin-components

支持近百种图标库

这是支持的图标库,图标是按需引入的,不用担心它的体积.你可以这样使用它:

<script setup>
import IconAccessibility from 'virtual:vite-icons/carbon/accessibility'
import IconAccountBox from 'virtual:vite-icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>

什么?每个图标都要 import 这也要烦了吧!开个玩笑,我们使用了vite-plugin-components之后,你只需要这样:

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

vite-plugin-icons

支持 windicss

windicss允许你通过原子 class 的方式来组织样式文件.常规情况下,写一个按钮的样式:

<template>
    <div class="btn">按钮</div>
</template>
<style scoped>
.btn{
    color: #fff;
    background: #333
    padding: 12px 24px;
}
</style>

使用 windcss 之后,你可以这样干:

<template>
    <div class="px-4 py-2 text-white bg-gray-700">按钮</div>
</template>

windicss 通过扫描文件的方式,来找到你使用到了哪些样式,并且按需引入他们,所以完全不用担心样式体积,而且随着你的项目越来越大,样式文件体积不会出现爆炸增长并且更易于维护.

搭配 vscode 插件WindiCSS IntelliSense,能更快地帮助你完成这些重复的样式,再也不用为 class 命名而烦恼了.

明暗主题切换

通过给 html 标签添加class="dark",开启暗黑模式.这部分的逻辑我已经帮你写好了.dark theme 是这样做的:

<p class="text-gray-700 bg-white dark:text-white dark:bg-gray-800">theme</p>

通常情况下,p 标签会使用白底灰字,使用 dark theme 时,dark 选择器后的样式优先生效,这时是灰底白字.

这是效果图:

导航状态持久化

前面我们说过,你可以通过 route 标签来配置 layout.同样地,你也可以通过 route 标签来配置页面层级,和它的名字.

<route lang="yaml">
    meta:
      level: 1
      name: 'Home'
      layout: default
  </route>

面包屑会根据 level 进行排序,这种面包屑不是严格意义上的记录用户的浏览路径,而是根据你对产品结构的层级定义来的.一般来说,列表页的 level 如果为 1,那么详情页的 level 就为 2.

面包屑导航的状态存在 vuex 中,使用vuex-persistedstate来做持久化,你可以试着刷新页面,导航状态并不会丢失.

多环境配置

vite2 中的多环境配置,跟 vue-cli 差不多,主要是通过,.env 文件来控制的,不再赘述. 如果你不了解,可以看环境变量与模式

svg 引入

你可以把一个 svg 文件,当作一个组件使用:

<template>
        <Notfound />
</template>
<script lang="ts" setup>
import Notfound from '../assets/404.svg'
</script>

使用 script setup 语法糖,会自动在 components 里面注册

物料库

你可以在这 fuep admin 中,使用fuep物料市场中的物料,而不需要做任何配置.假如你不喜欢 fuep admin 中已有的登录页,你可以在物料市场中找一个你喜欢的物料,点击生成代码,这些代码可以直接使用到你的 login.vue 中.

最后

fuep admin 我会一直维护它,如果你发现了一个 bug,或者想要新的功能可以给我反馈.