基于Vue3 + Element Plus 的通用后台管理系统_vue3 + javascript + elementplus后台框架

通用型后台管理模板，界面美观、适用于各种类型的后台应用；

采用 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

项目演示地址：http://demo.eleadmin.cn/login