導(dǎo)語

本次將會從頭到尾詳解，怎樣使用vue和ElementUI快速開發(fā)后臺管理系統(tǒng)，以及在開發(fā)過程中遇到的一些bug

• 在線demo
• 源碼

如果運(yùn)行時報錯，請檢查幾個包的版本

• node.js 6.10.0
• npm 3.10.10
• vue 2.1.6
• element-ui 1.0.9

項(xiàng)目結(jié)構(gòu)分析

• 活動發(fā)布
• 步驟一
• 步驟二
• 步驟三
• 步驟四
• 活動管理
• 列表頁
  • 活動詳情頁
    • 活動詳情
      • 步驟一
      • 步驟二
      • 步驟三
      • 步驟四
    • 報名管理
    • 簽到
    • 數(shù)據(jù)統(tǒng)計
    • 評價管理

開發(fā)前準(zhǔn)備

開發(fā)前，請先熟悉下面的4個文檔

• vue.js2.0中文,項(xiàng)目所使用的js框架
• vue-router,vue.js配套路由
• vuex，狀態(tài)管理
• Element，UI框架

正式開始

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

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

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

normal.png

3. 構(gòu)建項(xiàng)目目錄,新建一些頁面

menu.png

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

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

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

后臺管理系統(tǒng)封面.png

4.1 安裝element-ui

  $ npm i element-ui@1.0.9

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

4.2 引入element-ui

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

    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">高級插件</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">活動發(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}">活動發(fā)布</el-menu-item>
                <el-menu-item index="/activeManage" :class="{'isActive': !active}">活動管理</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)目,看到如圖所示頁面，項(xiàng)目的首頁就搭建好了

    $ npm run dev

首頁.png

4.5 如果運(yùn)行上面出現(xiàn)問題,可以直接克隆項(xiàng)目

# 克隆項(xiàng)目 
git clone https://github.com/WebCodeFarmer/houtai.git
# 查看目錄
ls
# 進(jìn)入項(xiàng)目目錄
cd houtai
# 安裝開發(fā)依賴,推薦使用npm安裝，cnpm可能會丟包，或者各種兼容性問題
npm install
# 運(yùn)行
npm run dev
# 打包壓縮
npm run build

下一篇，活動發(fā)布