撸了一个基于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,或者想要新的功能可以给我反馈.