使用vue.js2.0 + ElementUI開發后臺管理系統詳細教程（一）

2019-11-19 17:50:09

字體：大中小

來源：轉載

供稿：網友

1. 根據官方指引，構建項目框架

# 安裝vue $ cnpm install vue@2.1.6 # 全局安裝 vue-cli $ cnpm install --global vue-cli # 創建一個基于 webpack 模板的新項目my-project $ vue init webpack my-project # 進入項目目錄 $ cd my-project # 安裝依賴，走你 $ cnpm install # 運行項目 $ cnpm run dev

2. 運行項目之后，會看到以下界面，恭喜你，項目環境搭建成功

normal.

3. 根據項目結構,構建項目目錄

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

4. 搭建項目的首頁

項目首頁由頂部導航欄，左側導航欄，中間內容區構成，如圖

4.1 安裝element-ui

 $ cnpm i element-ui@1.0.9

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

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改為以下內容

<template>  <div id="app">  <!-- 頭部導航 -->  <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">系統設置</el-menu-item>    <el-menu-item index="5">活動發布</el-menu-item>    </el-menu>   </el-col>  </el-row>  </header>  <div style="position: relative;height: 60px;width: 100%;"></div>  <main>    <!-- 左側導航 -->   <div class="main-left">    <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">    <el-menu-item index="/activePublic" :class="{'isActive': active}">活動發布</el-menu-item>    <el-menu-item index="/activeManage" :class="{'isActive': !active}">活動管理</el-menu-item>    </el-menu>   </div>    <!-- 右側主內容區 -->    <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; } /* 頭部導航 */ 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;} /* 主內容區 */  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 預覽項目,看到如圖所示頁面，項目的首頁就搭建好了