大致效果圖

其中上方文頭部導(dǎo)航，左邊為菜單選項(xiàng)，中間為index頁(yè)面。

進(jìn)行組件化

新建目錄如下，新建文件如下

其中分為兩個(gè)文件夾，一個(gè)為views文件夾，一個(gè)為components文件夾，一個(gè)存放相關(guān)文件頁(yè)面信息，一個(gè)存放相關(guān)的組件信息。

創(chuàng)建相關(guān)的url

創(chuàng)建相關(guān)的頁(yè)面url 在router目錄下新建相關(guān)的文件， 代碼如下

{path: '/index',name: 'index',component: () => import('../views/Index')},

?

index頁(yè)面組件信息

index頁(yè)面相關(guān)代碼文件如下

<template><div><BoxHeader :msg="msg"></BoxHeader><div><el-container><Menum></Menum><BoxIndex v-show="cur==0"></BoxIndex><HelloWorld v-show="cur==1"></HelloWorld></el-container></div></div> </template> <style>.el-header {background-color: #B3C0D1;color: #333;}.el-aside {color: #333;} </style> <script>import Menum from "../components/Menum";import BoxIndex from "../components/BoxIndex";import BoxHeader from "../components/BoxHeader";import HelloWorld from "../components/HelloWorld";export default {components: {Menum,BoxIndex,BoxHeader,HelloWorld},data() {return {msg: 'https://www.iming.info/',cur: 1}}} </script>

其中把三個(gè)組件進(jìn)行相關(guān)的注冊(cè)，注冊(cè)到頁(yè)面中。這三個(gè)組件分別為BoxHeader，BoxIndex，Menum文件，對(duì)這三個(gè)文件進(jìn)行相關(guān)的注冊(cè)。

?

頭部文件

進(jìn)入頭部文件，這里對(duì)頭部文件進(jìn)行代碼，書寫，代碼如下

<template><div class="text1"><a href="http://localhost:8080/logout" class="text1">退出</a></div> </template><script>export default {name: 'BoxHeader',props: {msg: String}} </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped>h3 {margin: 40px 0 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}.text1 {text-align: right;padding: 10px;font-size: 20px;}.text1 a{text-decoration: none;} </style>

?

菜單文件

菜單文件代碼如下。并添加相關(guān)的事件綁定，確保能夠菜單伸縮。

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保險(xiǎn)產(chǎn)品管理</template><el-menu-item-group><el-menu-item index="1-1">保險(xiǎn)產(chǎn)品查詢</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title">用戶管理</template><el-menu-item-group><el-menu-item index="2-1">封號(hào)管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">問(wèn)答管理</template><el-menu-item-group><el-menu-item index="3-1">問(wèn)題管理</el-menu-item><el-menu-item index="3-2">回答管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="4"><template slot="title">數(shù)據(jù)統(tǒng)計(jì)</template><el-menu-item-group><el-menu-item index="4-1">保險(xiǎn)產(chǎn)品數(shù)據(jù)</el-menu-item><el-menu-item index="4-2">保險(xiǎn)公司數(shù)據(jù)</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside> </template><script>export default {name: 'Menum',methods: {ming(){console.log("3333");}}} </script>

上方使用的是Element Ui 框架實(shí)現(xiàn)

?

主頁(yè)文件

這里主頁(yè)文件為幾個(gè)簡(jiǎn)單的主頁(yè)文件。一個(gè)為示例，一個(gè)為主頁(yè)，代碼分別如下

<template><el-container><el-header><el-dropdown><i></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>刪除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container> </template><script>export default {name: 'HelloWorld',props: {msg: String}} </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped>h3 {margin: 40px 0 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;} </style><template><div class="hello"><h1>{{ msg }}</h1><p>For a guide and recipes on how to configure / customize this project,<br>check out the<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.</p><h3>Installed CLI Plugins</h3><ul><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li><li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li></ul><h3>Essential Links</h3><ul><li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li><li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li><li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li><li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li><li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li></ul><h3>Ecosystem</h3><ul><li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li><li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li><li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li><li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li><li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li></ul></div> </template><script> export default {name: 'HelloWorld',props: {msg: String} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 {margin: 40px 0 0; } ul {list-style-type: none;padding: 0; } li {display: inline-block;margin: 0 10px; } a {color: #42b983; } </style>

?

進(jìn)行事件綁定

這里由于跨兩個(gè)組件，所以進(jìn)行事件綁定，當(dāng)子組件觸發(fā)事件以后，先調(diào)用子組件的方法，再通過(guò)相關(guān)參數(shù)，調(diào)用父組件的方法，通過(guò)調(diào)用父組件的方法，實(shí)現(xiàn)更改父組件頁(yè)面的值。

具體流程如下

父組件創(chuàng)建相關(guān)方法，并綁定事件

創(chuàng)建相關(guān)方法

methods: {changeData(){console.log(444444);this.cur = 1;}}

綁定相關(guān)事件

<Menum @callFather="changeData"></Menum>

子組件創(chuàng)建相關(guān)方法并調(diào)用

ming(){console.log("3333");this.$emit("callFather");}

子組件創(chuàng)建相關(guān)方法并完成方法綁定

<el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保險(xiǎn)產(chǎn)品查詢</el-menu-item></el-menu-item-group>

子組件全部代碼如下

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保險(xiǎn)產(chǎn)品管理</template><el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保險(xiǎn)產(chǎn)品查詢</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title">用戶管理</template><el-menu-item-group><el-menu-item index="2-1">封號(hào)管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">問(wèn)答管理</template><el-menu-item-group><el-menu-item index="3-1">問(wèn)題管理</el-menu-item><el-menu-item index="3-2">回答管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="4"><template slot="title">數(shù)據(jù)統(tǒng)計(jì)</template><el-menu-item-group><el-menu-item index="4-1">保險(xiǎn)產(chǎn)品數(shù)據(jù)</el-menu-item><el-menu-item index="4-2">保險(xiǎn)公司數(shù)據(jù)</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside> </template><script>export default {name: 'Menum',methods: {ming(){console.log("3333");this.$emit("callFather");}}} </script>

父組件全部代碼如下

<template><div><BoxHeader :msg="msg"></BoxHeader><div><el-container><Menum @callFather="changeData"></Menum><BoxIndex v-show="cur==0"></BoxIndex><HelloWorld v-show="cur==1"></HelloWorld></el-container></div></div> </template> <style>.el-header {background-color: #B3C0D1;color: #333;}.el-aside {color: #333;} </style> <script>import Menum from "../components/Menum";import BoxIndex from "../components/BoxIndex";import BoxHeader from "../components/BoxHeader";import HelloWorld from "../components/HelloWorld";export default {components: {Menum,BoxIndex,BoxHeader,HelloWorld},data() {return {msg: 'https://www.iming.info/',cur: 0}},methods: {changeData(){console.log(444444);this.cur = 1;}}} </script>

完成效果圖

前

后

有道無(wú)術(shù)，術(shù)可成；有術(shù)無(wú)道，止于術(shù)

歡迎大家關(guān)注Java之道公眾號(hào)

好文章，我在看??

總結(jié)

以上是生活随笔為你收集整理的实践 | Element UI + Vue 管理系统首页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。