vue3后台管理系統模板


Vue3.0 發布第一個版本至今有一段時間了,到現在一直在更新優化,在性能方面,對比 Vue2.x ,性能的提升比較明顯,打包后體積更小

來看下 Vue3.x 新增了哪些功能和特性。

Performance:性能優化

Tree-shaking support:支持搖樹優化

Composition API:組合API

Fragment,Teleport,Suspense:新增的組件

Better TypeScript support:更好的TypeScript支持

Custom Renderer API:自定義渲染器

目前和vue3配套的UI組件庫相對較完善的因該算 Element Plus(pc端) 和 Vant(移動端)了
 
vue2.x 和 3.x還是有一些本質上的區別, 反而使用上區別不是太大。有vue2.x基礎的伙伴到手可用
 
這里不說那些單獨功能,因為實踐出真知,直接附上一個 vue3 + Element Plus 后台管理系統模板
我用目前了解的vue3知識做了一個后台管理系統模板。有興趣的伙伴可以拿到手直接就可用
 
1. 用到技術: vue3 + Element Plus + Vuex + Route
2. 技術點: 登錄功能 + 頁面跳轉 + 子路由 + 動態路由 + 菜單欄 + 子菜單(展開和不展開都兼容) + 路由監聽 + 路由跳轉
內容不復雜,一看就懂,功能不復雜,到手可用
 
待完善:UI美化 功能根據自己需要完善 適配
 
下面附上項目鏈接: https://gitee.com/jiuT94/vue3_template.git
項目成品圖:
 
 
代碼:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
 
 
App.vue
<template>
  <router-view/>
</template>

<style lang="scss">
body, html {
  background: #696969;
}
* {
  padding: 0;margin: 0;
}
</style>
 
 
router.js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/login',
    component: () => import('@/views/login')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/home'),
    children: [
      {path: '/aa', name: 'aa', component: () => import('@/views/home/rightnav/aa')},
      {path: '/bb', name: 'bb', component: () => import('@/views/home/rightnav/bb')},
      {path: '/cc', name: 'cc', component: () => import('@/views/home/rightnav/cc')},
      {path: '/dd', name: 'dd', component: () => import('@/views/home/rightnav/dd')},
      {path: '/ee', name: 'ee', component: () => import('@/views/home/rightnav/ee')},
      {path: '/ff', name: 'ff', component: () => import('@/views/home/rightnav/ff')},
      {path: '/wei1', name: 'wei1', component: () => import('@/views/home/rightnav/wei1')},
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
 
 
login.vue
<template>
  <div class="login">
      <el-form
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <el-form-item label="賬號:">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="密碼:">
          <el-input v-model="formLabelAlign.password" />
        </el-form-item>
      </el-form>
      <el-button type="primary" size="large" style="margin: 100px 0 0 220px;" @click="denglu">登錄</el-button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { reactive } from 'vue'
export default {
  name: 'login',
  setup() {
    const $router = useRouter();
    const formLabelAlign = reactive({
      name: '',
      password: '',
    })
    function denglu() {
      console.log("ddd", formLabelAlign.name)
      console.log("ddd", formLabelAlign.password)
      if(formLabelAlign.name && formLabelAlign.password) {
        $router.replace('/home')
      }
    }
    return {formLabelAlign, denglu}
  }

}
</script>

<style>

.login {width: 500px;height: 460px;background: #778899;margin: 100px auto;border-radius: 10px;padding: 150px 0 0 0px;box-sizing: border-box;}
</style>
 
 
home.vue
<template>
  <div>
    <el-container style="height: 100vh;">
      <el-header class="head"><Top/></el-header>
      <el-container>
        <el-aside width="200px" class="left"><LeftNav/></el-aside>
        <el-main class="right"><router-view/></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Top from '@/views/home/top'
import LeftNav from '@/views/home/leftnav'
export default {
  components: {Top, LeftNav}
}
</script>

<style>
.head {background: #ccc;}
.left {background: #ddd;}
.right {background: #eee;}
</style>
 
 
leftNav.vue
<template>
      <el-menu
        :default-active="nowPath"
        class="el-menu-vertical-demo"
        router
        unique-opened
        active-text-color="#fe4800"
        background-color="#fff"
         @open="handleOpen"
         @close="handleClose"
      >
        <div v-for="(item) in menu" :key="item" class="elMenu">
          <el-menu-item :index="item.path" @click="pathItem(item)" v-if="!item.children">{{item.title}}</el-menu-item>
          <el-sub-menu :index="item.title" style="width: 200px;" v-if="item.children">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item-group v-for="itemc in item.children" :key="itemc">
              <el-menu-item :index="itemc.path" @click="pathItem(itemc)">{{itemc.title}}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </div>
       
      </el-menu>
</template>

<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
export default {
  components: { Document, Location, Setting, IconMenu },
  setup() {
    const $route = useRouter()
    const menu = reactive([
      {
        path: '/home',
        title: '首頁',
        children: [
          {path: '/aa', title: 'aa'},
          {path: '/bb', title: 'bb'},
          {path: '/cc', title: 'cc'},
        ]
      },
      {
        path: '/wei1',
        title: 'wei1',
      },
      {
        path: '',
        title: '第二組',
        children: [
          {path: '/dd', title: 'dd'},
          {path: '/ee', title: 'ee'},
          {path: '/ff', title: 'ff'},
        ]
      },
    ])
    const nowPath = ref('/aa')
    const handleOpen = function(key, keyPath){
      console.log('key11',key)
      console.log('keyPath11', keyPath)
      console.log('keyPanowPath.valueth11', nowPath.value)
      if(key == '首頁' && nowPath.value === '/aa') {
        console.log('2334')
        $route.replace('/aa')
      }
    }
    const handleClose = function(key, keyPath) {
      console.log('key22',key)
      console.log('keyPath22', keyPath)
    }
    const pathItem = item => {
      nowPath.value = item.path
      console.log('ddfsdf', nowPath.value)

    }
   
    return {handleOpen, handleClose, menu,pathItem, nowPath}
  },
  watch: {
    $route(m, n) {
      console.log('mm', m)
      console.log('nn', n)
    }
  }
}
</script>

<style>
</style>
 
 
項目目錄


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM