基於elementUI創建的vue項目

這周對公司的內容使用vue進行重構，所以記錄一下開始項目的過程

下載elementUI：

項目文件夾中在命令行中輸入：npm install elementui -s

 

下載完成后在 main.js 中加入以下內容：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

 

Vue.use(ElementUI);

 

 

需要注意的是，樣式文件需要單獨引入

 

使用elementui的布局的組件組成頁面結構，並在結構中使用自定義的組件

<template>

  <el-container>

  <el-header>

      <Top />

  </el-header>

  <el-container>

    <el-aside width="200px">

        <Aside/>

    </el-aside>

    <el-main>

        <router-view></router-view>

    </el-main>

  </el-container>

</el-container>

</template>

 

在上邊組件中引入了top和aside組件

引入外部的組件需要使用import引入組件，並且導出組件

import Aside from '@/components/common/aside.vue'

import Top from '@/components/common/top.vue'

export default {

    components:{

        Top,

        Aside

    }

};

 

這樣頁面初始加載的時候就顯示了

 

 

 

使用elementui的導航欄時如果使用路由要把:router設置為true，並在el-menu-item中的index中寫上對應的路由地址

 

 

<el-menu

      default-active="2"

      class="el-menu-vertical-demo"

      background-color="#545c64"

      text-color="#00b4aa"

      router=true

      active-text-color="#fff">

      <el-menu-item index="2">

        <i class="el-icon-menu"></i>

        <span slot="title">透傳概覽</span>

      </el-menu-item>

      <el-submenu index="1">

        <template slot="title">

          <i class="el-icon-location"></i>

          <span>異網透傳清單</span>

        </template>

        <el-menu-item-group>

          <el-menu-item index="/first">疑似透傳客戶清單</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group>

          <el-menu-item index="/second">疑似透傳客戶分析</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group>

          <el-menu-item index="/third">疑似服務IP清單</el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group>

          <el-menu-item index="/fourth">服務IP行為分析</el-menu-item>

        </el-menu-item-group>

      </el-submenu>

    </el-menu>

 

可以設置導航欄中字體的激活和未激活的狀態，也可以設置背景顏色，激活的背景顏色可以通過一下代碼來實現

.el-menu-item.is-active {

   background-color: #00b4aa !important;

}

 

添加路由需要的幾步：

新建一個路由對應的文件

Router下的index.js中引入組件，並配置路由

添加新的路由鏈接

此時項目的結構就構建成功了