快捷導(dǎo)航

使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）

更新時(shí)間：2017年01月21日 10:39:08 作者：拯救地球好累丫

這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）的相關(guān)資料,需要的朋友可以參考下

1. 根據(jù)官方指引，構(gòu)建項(xiàng)目框架

# 安裝vue
 $ cnpm install vue@2.1.6
 # 全局安裝 vue-cli
 $ cnpm install --global vue-cli
 # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目my-project
 $ vue init webpack my-project
 # 進(jìn)入項(xiàng)目目錄
 $ cd my-project
 # 安裝依賴，走你
 $ cnpm install
 # 運(yùn)行項(xiàng)目
 $ cnpm run dev

2. 運(yùn)行項(xiàng)目之后，會(huì)看到以下界面，恭喜你，項(xiàng)目環(huán)境搭建成功

normal.

3. 根據(jù)項(xiàng)目結(jié)構(gòu),構(gòu)建項(xiàng)目目錄

src/page/ -------------存放視圖頁(yè)面的目錄
activeManage/ --------------------活動(dòng)管理
index.vue ------------------------活動(dòng)管理列表頁(yè)
detail.vue ------------------------活動(dòng)管理詳情頁(yè)
page1/2/3/4/5 -------------------分別對(duì)應(yīng)：活動(dòng)管理/報(bào)名管理/簽到/數(shù)據(jù)統(tǒng)計(jì)/評(píng)價(jià)管理
activePublic/ -----------------------活動(dòng)發(fā)布
index.vue -----------------------活動(dòng)發(fā)布首頁(yè)
step1/2/3/4 --------------------分別對(duì)應(yīng)：步驟一/二/三/四

4. 搭建項(xiàng)目的首頁(yè)

項(xiàng)目首頁(yè)由頂部導(dǎo)航欄，左側(cè)導(dǎo)航欄，中間內(nèi)容區(qū)構(gòu)成，如圖

4.1 安裝element-ui

 $ cnpm i element-ui@1.0.9

建議固定vue和element-ui的版本，避免將來(lái)版本升級(jí)后產(chǎn)生沖突

4.2 引入element-ui

在app.vue引入element-ui，然后就可以在其他任何頁(yè)面中使用了

import Element from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(Element)

4.3 使用element-ui

將app.vue改為以下內(nèi)容

<template>
  <div id="app">
  <!-- 頭部導(dǎo)航 -->
  <header class="header">
  <el-row>
   <el-col :span="24">
    <el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
    <el-menu-item index="1">高級(jí)插件</el-menu-item>
    <el-menu-item index="2">在線商城</el-menu-item>
    <el-menu-item index="3">客戶管理</el-menu-item>
    <el-menu-item index="4">系統(tǒng)設(shè)置</el-menu-item>
    <el-menu-item index="5">活動(dòng)發(fā)布</el-menu-item>
    </el-menu>
   </el-col>
  </el-row>
  </header>
  <div style="position: relative;height: 60px;width: 100%;"></div>
  <main>
    <!-- 左側(cè)導(dǎo)航 -->
   <div class="main-left">
    <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
    <el-menu-item index="/activePublic" :class="{'isActive': active}">活動(dòng)發(fā)布</el-menu-item>
    <el-menu-item index="/activeManage" :class="{'isActive': !active}">活動(dòng)管理</el-menu-item>
    </el-menu>
   </div>
    <!-- 右側(cè)主內(nèi)容區(qū) -->
    <div class="main-right" >
    </div>
  </main>
  </div>
 </template>
 <script>
 import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 Vue.use(Element)
 export default {
  name: 'app',
  data: function (){
  return {
   active:true
  }
  }
 }
 </script>
 <style>
  body{margin: 0;}
 #app {
  min-width: 1200px;
  margin: 0 auto;
  font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
 }
 /* 頭部導(dǎo)航 */
 header{z-index: 1000;min-width: 1200px;transition: all 0.5s ease; border-top: solid 4px #3091F2; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04); }
 header.header-fixed{position: fixed;top: 0;left: 0;right: 0;}
 header .el-menu-demo{padding-left: 300px!important;}
 /* 主內(nèi)容區(qū) */
  main{ display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 800px; border: solid 40px #E9ECF1; background-color: #FCFCFC; }
  main .main-left{text-align: center;width: 200px;float: left;}
  main .main-right{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff; padding: 50px 70px; }
  main .el-menu{background-color: transparent!important;}
 </style>

4.4 預(yù)覽項(xiàng)目,看到如圖所示頁(yè)面，項(xiàng)目的首頁(yè)就搭建好了

 $ cnpm run dev

在下篇文章小編給大家介紹使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（二），敬請(qǐng)關(guān)注！

以上所述是小編給大家介紹的使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: