Vite4-Admin: 🔥 ⚡️Vue3 + Vite4 + Vue-Router4 + Pinia2后台系统
vite-admin 一款轻量级的后台管理系统,基于最新前端技术vue3 setup +vite4.x+pinia2+sass开发构建。
viteAdmin支持i18n国际化、图表/表格/表单、路由缓存、权限控制等功能。
使用技术
- 编码工具:Vscode+Sublime
- 框架技术:vite4+vue3+pinia+vue-router@4
- UI组件库:ve-plus (基于vue3组件库)
- 样式处理:sass^1.58.3
- 图表组件:echarts^5.4.2
- 国际化方案:vue-i18n^9.2.2
- 富文本编辑器组件:wangeditor^4.7.15
- markdown编辑器:md-editor-v3^2.11.0
- 数据模拟:mockjs^1.1.0
特性
- 最新前端技术栈vite4、vue3、pinia、vue-router、vue-i18n、ve-plus。
- 支持中文/英文/繁体多语言模式切换。
- 支持表格单选/多选、边框/隔行换色、横向/纵向虚拟滚动条等功能。
- 搭配全新高颜值的vue3组件库,风格更加统一。
- 支持多个模板布局切换。
- 支持路由权限控制。
- 支持路由缓存。
项目结构
Vue3组件库VEPlus
一款全新开发的vue3.x自定义组件库vePlus。支持40+
常用组件。
npm install ve-plus
yarn add ve-plus
通用布局模板
如下图:公共布局文件在layouts目录,提供了4种布局模板。
<script setup>
import { computed } from 'vue'
import { appStore } from '@/store/modules/app'
// 引入布局模板
import Classic from './layout/classic/index.vue'
import Columns from './layout/columns/index.vue'
import Vertical from './layout/vertical/index.vue'
import Transverse from './layout/transverse/index.vue'
const store = appStore()
const config = computed(() => store.config)
const LayoutConfig = {
classic: Classic,
columns: Columns,
vertical: Vertical,
transverse: Transverse
}
</script>
<template>
<div class="veadmin__container" :style="{'--themeSkin': store.config.skin}">
<component :is="LayoutConfig[config.layout]" />
</div>
</template>
<!-- 主缓存模板 -->
<script setup>
import { ref } from 'vue'
import { useRoutes } from '@/hooks/useRoutes'
import { tabsStore } from '@/store/modules/tabs'
import Permission from '@/components/Permission.vue'
import Forbidden from '@/views/error/forbidden.vue'
const { route } = useRoutes()
const store = tabsStore()
</script>
<template>
<Scrollbar autohide gap="2">
<div class="ve__layout-main__wrapper">
<!-- 路由鉴权 -->
<Permission :roles="route?.meta?.roles">
<template #tips>
<Forbidden />
</template>
<!-- 路由缓存 -->
<router-view v-slot="{ Component }">
<transition name="ve-slide-right" mode="out-in" appear>
<KeepAlive :include="store.cacheViews">
<component v-if="store.reload" :is="Component" :key="route.path" />
</KeepAlive>
</transition>
</router-view>
</Permission>
</div>
</Scrollbar>
</template>
Vue3多语言解决方案
在项目中通过vue-i18n插件实现国际化展示。
npm i vue-i18n
/**
* 国际化配置
* @author YXY
*/
import { createI18n } from 'vue-i18n'
import { appStore } from '@/store/modules/app'
// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'
// 默认语言
export const langVal = 'zh-CN'
export default async (app) => {
const store = appStore()
const lang = store.lang || langVal
const i18n = createI18n({
legacy: false,
locale: lang,
messages: {
'en': enUS,
'zh-CN': zhCN,
'zh-TW': zhTW
}
})
app.use(i18n)
}
<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { appStore } from '@/store/modules/app'
const { locale } = useI18n()
const store = appStore()
const langVal = ref(locale.value)
const langOptions = ref([
{key: "zh-CN", label: "简体中文"},
{key: "zh-TW", label: "繁体字"},
{key: "en", label: "英文"},
])
const changeLang = () => {
// 设置locale语言
locale.value = langVal.value
store.lang = locale.value
// store.setLang(locale.value)
}
</script>
<template>
<Dropdown v-model="langVal" :options="langOptions" placement="bottom" @change="changeLang">
<div class="toolbar__item"><Icon name="ve-icon-lang" size="20" cursor /></div>
<template #label="{item}">
<div>
{{item.label}} <span style="color: #999; font-size: 12px;">{{item.key}}</span>
</div>
</template>
</Dropdown>
</template>
vue3动态图表
通过引入echarts插件实现动态图表,封装了一个useEcharts.js图表Hooks。
npm i echarts
/**
* 动态图表Hooks
* @author YXY
*/
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import { useResizeObserver } from 've-plus'
export function useEcharts(node, options) {
let chartNode
let chartRef = ref(null)
const resizeHandle = () => {
chartNode && chartNode.resize()
}
onMounted(() => {
if(node.value) {
chartNode = echarts.init(node.value)
chartNode.setOption(options)
chartRef.value = chartNode
}
})
onBeforeUnmount(() => {
chartNode.dispose()
})
// 自适应图表
useResizeObserver(node, resizeHandle)
return chartRef
}
Ok,基于vue3+pinia2开发后台系统就介绍到这里。
博客:基于Tauri+Vue3+Rust+ElementPlus桌面端聊天实例
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: