物聯網項目入坑2---VUE之導航欄設計

簡單學習了幾天的Vue相關知識，根據自己的需求設計了一個導航欄。在這裏做一個簡單的記錄~~~

新建項目相關的知識，可參考前一篇博客。

先來一張效果圖：

準備工作:

1.新建一個工程，然後用VScode軟件打開

2.在工程src目錄下的components目錄下,新建一個導航欄文件，navigation_bar.vue,然後添加以下內容到該文件；

<template>
    <div style="background-color: #EBEBEB;height:800px">
        <div style="width:100%;background-color: #409EFF; height:7%">
            <span class="demonstration" style="float:left;padding-top:16px;color:white;margin-left:50%">
                網站首頁
            </span>
            <span class="demonstration" style="float:right;padding-top:16px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    吳小白<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>個人信息</el-dropdown-item>
                    <el-dropdown-item>退出登錄</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
        <div style="background-color: #EBEBEB;margin-top:5px">
            <el-row :gutter="10" >
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div >
                        <el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:800px" @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#409EFF">
                            <!-- 一個導航欄下面有子導航欄 -->
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-monitor"></i>
                                    <span slot="title">智能設備</span>
                                </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" >
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">設備列表</span>
                                    </el-menu-item>
                                <el-menu-item index="1-2">
                                    <i class="el-icon-chat-dot-square"></i>
                                    <span slot="title">設備對話</span>    
                                </el-menu-item>
                                <el-menu-item index="1-3">
                                    <i class="el-icon-circle-plus-outline"> </i>
                                    <span slot="title">添加設備</span>
                                </el-menu-item>
                            </el-menu-item-group>
                            <!-- 在子菜單中再建立一個子菜單 -->
                            <!-- <el-submenu index="1-4">
                                <span slot="title">選項4</span>
                            <el-menu-item index="1-4-1">選項1</el-menu-item>
                            </el-submenu> -->
                            </el-submenu>
                            <!-- 下面是單個導航欄 -->
                            <el-menu-item index="2">
                                <i class="el-icon-data-analysis"></i>
                                <span slot="title">設備數據</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-location"></i>
                                <span slot="title">位置查詢</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">系統設置</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <!-- 內容 -->
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>


<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                searchCriteria: '',
            }
        },

        methods:{
            handleIconClick(ev) {
                console.log(ev);
            },

            handleSelect(key, keyPath){
                switch(key){
                    case '1':
                        this.$router.push('/Page1');
                        break;
                    case '1-1':
                        this.$router.push('/Page1_1');
                        break;
                    case '1-2':
                        this.$router.push('/Page1_2');
                        break;
                    case '1-3':
                        this.$router.push('/Page1_3');
                        break;
                    case '2':
                        this.$router.push('/Page2')
                        break;
                    case '3':
                        this.$router.push('/Page3')
                        break;
                    case '4':
                        this.$router.push("/Page4");
                        break;
                    default :
                        break;
                }
            },

        },
    }
</script>

3.在工程src目錄下新建一個page的文件夾，分別在裏面創建以下幾個文件：

然後在每個文件中添加以下內容：注意每個文件修改下內容~~~~

例如在page1_1.vue中添加代碼：

<template>
    <div>
        這是第1-1頁
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data(){
        return{}
    }
    
}
</script>

4.在工程src目錄下的route目錄下的index.js文件中增加新的路由

以下是修改後的index.js文件代碼：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//大導航欄
import Page1 from '@/page/page1.vue'
import Page2 from '@/page/page2.vue'
import Page3 from '@/page/page3.vue'
import Page4 from '@/page/page4.vue'
//子導航欄
import Page1_1 from '@/page/page1_1.vue'
import Page1_2 from '@/page/page1_2.vue'
import Page1_3 from '@/page/page1_3.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //後面的都是自己添加的
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page1_1',
      name: 'Page1_1',
      component: Page1_1
    },
    {
      path: '/page1_2',
      name: 'Page1_2',
      component: Page1_2
    },
    {
      path: '/page1_3',
      name: 'Page1_3',
      component: Page1_3
    },
    {
      path: '/page2',
      name: 'Page2',
      component: Page2
    },
    {
      path: '/page3',
      name: 'Page3',
      component: Page3
    },
    {
      path: '/page4',
      name: 'Page4',
      component: Page4
    }
  ]
})

5.修改main.js文件，主要是導入餓了麼UI的框架和自己編寫導航欄

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//導入elementUI相關框架
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//導入導航欄
import Navi from './components/navigation_bar.vue'



Vue.use(ElementUI)

Vue.config.productionTip = false

// /* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })
new Vue({
  el: '#app',
  router,
  render: h => h(Navi)
})

6.打開VS Terminal，使用命令

npm install

npm run dev

即可打開網頁瀏覽。element-ui導航欄設計相關可以參考官網,我也是半路出家的，就不誤人子弟了。

PS:這裏只涉及到簡單的頁面切換，後續的話，慢慢再往裏面加些數據展示~~~~