實踐 | Element UI + Vue 管理系統首頁

小小上一篇推薦了幾個超牛逼的公眾號，這次將會回歸實踐，進入本周的第一篇，本周第一篇將會是Element UI + Vue 製作相關的Tab切換。

核心知識點

關於 v-show屬性的相關使用

大致效果圖

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

前提

前提需要閱讀上一篇，使用Vue UI 方式創建 Hello World Vue 項目。

教程進行組件化

新建目錄如下，新建文件如下其中分為兩個文件夾，一個為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>
    <a href="http://localhost:8080/logout">退出</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>
    <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>

完成效果圖前後