通用型后台管理模板,界面美观、适用于各种类型的后台应用;
采用 Vue3、Elementplus、Vite、Pinia、Sass最新技术栈;系统已包含后台管理系统常用的功能;并有丰富的模板案例和页面展示。
使用Vue3,elementplus编写, 组合式API、注释详细,源码易于阅读。不预留任何后门代码,请放心使用。
系统采用响应式布局设计,可在多端部署运行、系统支持主流浏览器。
1、创建项目
npm init vue@latest
2、安装 Element Plus
npm i element-plus -S
3、在main.js中添加应用
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import '@/assets/css/base.scss' // 全局样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 导入 element-plus 图标库
const app = createApp(App)
// 注册 element-plus 图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.use(i18n)
app.use(permission)
app.use(watermark)
app.use(ellipsis)
app.mount('#app')
4、在项目中使用组件
<template>
<div>
<el-button type="primary">Button</el-button>
</div>
</template>
5、创建路由文件
import { createRouter, createWebHistory } from 'vue-router'
import AppLayout from '../views/layout/AppLayout.vue'
const routes = [
{
path: '/',
name: 'home',
meta: {
title: '首页',
requiresAuth: true // 需要token验证
},
component: AppLayout,
redirect: '/dashboard/workplace',
children: []
},
{
// 系统登录页
path: '/login',
name: 'login',
component: () => import('../views/login/LoginView.vue')
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
if (to.matched.some((item) => item.meta?.requiresAuth)) {
const store = useTokenStore()
if (!store.token?.access_token) {
next({ name: 'login', query: { redirect: to.fullPath } })
return
}
}
})
export default router