Vue3.0商店后臺(tái)管理系統(tǒng)項(xiàng)目實(shí)戰(zhàn)-vue3搭配Element Plus框架使用

側(cè)邊欄導(dǎo)航
vue3搭配Element Plus框架使用
Element Plus基于 Vue 3,面向設(shè)計(jì)師和開(kāi)發(fā)者的組件庫(kù)
文檔:https://element-plus.gitee.io/zh-CN/

安裝

# NPM
$ npm install element-plus --save
圖片.png

安裝完成之后開(kāi)始引入
打開(kāi)main.js的文件
這里接口文檔上是有說(shuō)明的 茵休,直接根據(jù)文檔上的教程來(lái)寫(xiě)


圖片.png

main.js


import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

開(kāi)始使用組件里面的布局
后臺(tái)管理的布局
直接復(fù)制代碼即可


 <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>

LayOut.vue

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <router-link to="/index">角色列表</router-link>
            <router-link to="/user">用戶(hù)列表</router-link></el-aside
          >
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>

優(yōu)化css

LayOut.vue

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header  class="common-header   flex-float">
            <div  class="flex">
            <img  class="logo" src="../../assets/logo.png"  alt="">
            <h1  class="title">商鋪后臺(tái)管理系統(tǒng)</h1>
            </div>

            <el-button type="danger">退出</el-button>

        </el-header>
        <el-container>
          <el-aside  class="common-aside " width="200px">
            <router-link to="/index">角色列表</router-link>
            <router-link to="/user">用戶(hù)列表</router-link></el-aside
          >
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>
<style >
.el-container {
  height: 100vh;
  overflow: hidden;
}
.common-header {
    background: rgb(63 67 72);
}

.common-aside {
  background: rgb(48, 55, 65);
}
.logo{
    width:60px;
}
.title{
color: #fff;
}
</style>

app.vue里面寫(xiě)一個(gè)全局的flex布局

<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

/* flex布局 */
.flex-float {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}
</style>

到這里 后臺(tái)管理系統(tǒng) 的框架初具模型 繼續(xù)編寫(xiě)代碼


繼續(xù)編寫(xiě)左側(cè)的導(dǎo)航菜單
文檔里面都是有代碼可以直接拿過(guò)來(lái)使用的


根據(jù)menu菜單 的屬性 進(jìn)行一些代碼的優(yōu)化


設(shè)置router
是否啟用 vue-router 模式。 啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) 使用 default-active 來(lái)設(shè)置加載時(shí)的激活項(xiàng)幻梯。

完善之后的導(dǎo)航欄

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header class="common-header flex-float">
          <div class="flex">
            <img class="logo" src="../../assets/logo.png" alt="" />
            <h1 class="title">商鋪后臺(tái)管理系統(tǒng)</h1>
          </div>

          <el-button type="danger">退出</el-button>
        </el-header>
        <el-container>
          <el-aside class="common-aside" width="200px">
            <el-menu background-color="none" text-color="#fff" :router="true">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>賬號(hào)管理</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="/user">用戶(hù)列表</el-menu-item>
                  <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>角色管理</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="/role">角色列表</el-menu-item>
                  <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>
<style >
.el-container {
  height: 100vh;
  overflow: hidden;
}
.common-header {
  background: rgb(63 67 72);
}

.common-aside {
  background: rgb(48, 55, 65);
}
.logo {
  width: 60px;
}
.title {
  color: #fff;
}
</style>

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'layOut',
   // redirect: "/index",//重定向 進(jìn)來(lái)就自動(dòng)默認(rèn)到index路徑
    component: () => import('../views/LayOut/LayOut.vue'),

    //嵌套路由/子路由
    children: [
      {
        path: "/role",
        name: "role",
        component: () => import('../views/pages/roleList.vue'),
      }, {
        path: "/user",
        name: "user",
        component: () => import('../views/pages/userList.vue'),
      }
    ]
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末过吻,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子撵儿,更是在濱河造成了極大的恐慌拳魁,老刑警劉巖惶桐,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡姚糊,警方通過(guò)查閱死者的電腦和手機(jī)贿衍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)救恨,“玉大人贸辈,你說(shuō)我怎么就攤上這事〕Σ郏” “怎么了擎淤?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秸仙。 經(jīng)常有香客問(wèn)我嘴拢,道長(zhǎng),這世上最難降的妖魔是什么筋栋? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任炊汤,我火速辦了婚禮正驻,結(jié)果婚禮上弊攘,老公的妹妹穿的比我還像新娘。我一直安慰自己姑曙,他們只是感情好襟交,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著伤靠,像睡著了一般捣域。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宴合,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天焕梅,我揣著相機(jī)與錄音,去河邊找鬼卦洽。 笑死贞言,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的阀蒂。 我是一名探鬼主播该窗,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蚤霞!你這毒婦竟也來(lái)了酗失?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤昧绣,失蹤者是張志新(化名)和其女友劉穎规肴,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拖刃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年鉴嗤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片序调。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡醉锅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出发绢,到底是詐尸還是另有隱情硬耍,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布边酒,位于F島的核電站经柴,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏墩朦。R本人自食惡果不足惜坯认,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望氓涣。 院中可真熱鬧牛哺,春花似錦、人聲如沸劳吠。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)痒玩。三九已至淳附,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蠢古,已是汗流浹背奴曙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留草讶,地道東北人洽糟。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像到涂,于是被迫代替她去往敵國(guó)和親脊框。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容