大致效果圖

其中上方文頭部導航，左邊為菜單選項，中間為index頁面。

進行組件化

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

其中分為兩個文件夾，一個為views文件夾，一個為components文件夾，一個存放相關文件頁面信息，一個存放相關的組件信息。

創建相關的url

創建相關的頁面url 在router目錄下新建相關的文件， 代碼如下

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

?

index頁面組件信息

index頁面相關代碼文件如下

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

其中把三個組件進行相關的注冊，注冊到頁面中。這三個組件分別為BoxHeader，BoxIndex，Menum文件，對這三個文件進行相關的注冊。

?

頭部文件

進入頭部文件，這里對頭部文件進行代碼，書寫，代碼如下

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

?

菜單文件

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

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保險產品管理</template><el-menu-item-group><el-menu-item index="1-1">保險產品查詢</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">封號管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">問答管理</template><el-menu-item-group><el-menu-item index="3-1">問題管理</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">數據統計</template><el-menu-item-group><el-menu-item index="4-1">保險產品數據</el-menu-item><el-menu-item index="4-2">保險公司數據</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 框架實現

?

主頁文件

這里主頁文件為幾個簡單的主頁文件。一個為示例，一個為主頁，代碼分別如下

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

?

進行事件綁定

這里由于跨兩個組件，所以進行事件綁定，當子組件觸發事件以后，先調用子組件的方法，再通過相關參數，調用父組件的方法，通過調用父組件的方法，實現更改父組件頁面的值。

具體流程如下

父組件創建相關方法，并綁定事件

創建相關方法

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

綁定相關事件

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

子組件創建相關方法并調用

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

子組件創建相關方法并完成方法綁定

<el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保險產品查詢</el-menu-item></el-menu-item-group>

子組件全部代碼如下

<template><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title">保險產品管理</template><el-menu-item-group><el-menu-item index="1-1" v-on:click="ming">保險產品查詢</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">封號管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title">問答管理</template><el-menu-item-group><el-menu-item index="3-1">問題管理</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">數據統計</template><el-menu-item-group><el-menu-item index="4-1">保險產品數據</el-menu-item><el-menu-item index="4-2">保險公司數據</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>

完成效果圖

前

后

有道無術，術可成；有術無道，止于術

歡迎大家關注Java之道公眾號

好文章，我在看??

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。