這篇文章主要介紹了使用vue.js2.0 + ElementUI開發后台管理系統詳細教程（一）的相關資料,需要的朋友可以參考下
1. 根據官方指引，構建項目框架
|
1
2
3
4
5
6
7
8
9
10
11
12
|
# 安裝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
|
1
|
$ cnpm i element
-ui
@1.0.9
|
建議固定vue和element-ui的版本，避免將來版本升級后產生沖突
4.2 引入element-ui
在app.vue引入element-ui，然后就可以在其他任何頁面中使用了
|
1
2
3
|
import Element from
'element-ui'
import
'element-ui/lib/theme-default/index.css'
Vue.use(Element)
|
4.3 使用element-ui
將app.vue改為以下內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<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 預覽項目,看到如圖所示頁面，項目的首頁就搭建好了
|
1
|
$ cnpm run dev
|
在下篇文章小編給大家介紹使用vue.js2.0 + ElementUI開發后台管理系統詳細教程（二），敬請關注！
以上所述是小編給大家介紹的使用vue.js2.0 + ElementUI開發后台管理系統詳細教程（一），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
原文地址：http://www.jb51.net/article/103786.htm