在上篇文章給大家介紹了使用vue.js2.0 + ElementUI開發后台管理系統詳細教程（一）
1. 引入路由工具vue-router，切換視圖
|
1
2
|
# 安裝vue-router
cnpm install vue-router --save-dev
|
2. 使用vue-router
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
main.js
import Vue from
'vue'
import App from
'./App'
import VueRouter from
'vue-router'
import routeConfig from
'./router-config'
// 引入router-config.js文件
//加載路由中間件
Vue.use(VueRouter)
//定義路由
const router =
new
VueRouter({
routes: routeConfig
})
new
Vue({
router,
store,
el:
"#app"
,
render: h => h(App)
})
|
3. 配置路由
在src目錄下新建router-config.js，在router-cinfig.js中里面配置路由
|
1
2
3
4
5
6
7
8
|
// 引入組件
import activePublic from
'./page/activePublic/index.vue'
export
default
[
{
// 配置路由，當路徑為'/activePublic',使用組件activePublic
path:
'/activePublic'
,component:activePublic,
}
]
|
4. 使用路由
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
app.vue
<template>
<div id=
"app"
>
<!-- 頭部導航 -->
...
<main>
<!-- 左側導航 -->
<div class=
"main-left"
>
...
</div>
<!-- 右側主內容區 -->
<div class=
"main-right"
>
<!-- 視圖 -->
<router-view class=
"view"
></router-view>
</div>
</main>
</div>
</template>
|
5. 打開activePublic/index.vue文件，在頁面隨便寫點東西，測試一下，路由是否配置成功
|
1
2
3
4
5
6
7
8
9
10
|
<template>
<div class=
"activePublic "
>
<!-- element步驟組件 -->
<el-steps :space=
"200"
:active=
"step"
class=
"step"
>
<el-step title=
"活動信息"
description=
""
></el-step>
<el-step title=
"報名簽到"
description=
""
></el-step>
<el-step title=
"分享設置"
description=
""
></el-step>
<el-step title=
"個性設置"
description=
""
></el-step>
</el-steps>
</template>
|
6. 啟動項目cnpm run dev，看到如下頁面，說明路由配置成功
7. 接下來，在activePublic/index.vue直接調用element-ui組件，完成活動發布的首頁，完成好的代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
activePublic/index.vue
<template>
<div class=
"activePublic "
>
<!-- 步驟組件 -->
<el-steps :space=
"200"
:active=
"step"
class=
"step"
>
<el-step title=
"活動信息"
description=
""
></el-step>
<el-step title=
"報名簽到"
description=
""
></el-step>
<el-step title=
"分享設置"
description=
""
></el-step>
<el-step title=
"個性設置"
description=
""
></el-step>
</el-steps>
<!-- 視圖 -->
<router-view class=
"view"
></router-view>
<div class=
"but-group"
>
<el-button >預覽</el-button>
<el-button >上一步</el-button>
<el-button type=
"primary"
>下一步</el-button>
<el-button type=
"primary"
>發布活動</el-button>
</div>
</div>
</template>
|
上面這個頁面又出現了一個router-view，為什么要這樣放呢？因為step1、step2、step3、step4四個頁面都含有頂部的"步驟"組件，所以這里把step1/2/3/4單獨提出來放在4個頁面中
8. 在router-config.js文件中配置二級路由
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
router-config.js
import activePublic from
'./page/activePublic/index.vue'
<!-- 引入子頁面 -->
import step1 from
'./page/activePublic/step1.vue'
import step2 from
'./page/activePublic/step2.vue'
import step3 from
'./page/activePublic/step3.vue'
import step4 from
'./page/activePublic/step4.vue'
export
default
[
{
path:
'/activePublic'
,component:activePublic,
// 配置子路由
children:[
// 路徑為'/activePublic'，使用組件step1
{ path:
''
, component: step1 },
// 路徑為'/activePublic/step1'，使用組件step1
{ path:
'step1'
, component: step1 },
// 路徑為'/activePublic/step2'，使用組件step2
{ path:
'step2'
, component: step2 },
{ path:
'step3'
, component: step3 },
{ path:
'step4'
, component: step4 }
]
}
]
|
9. 重新啟動項目cnpm run dev,在瀏覽器中默認路徑為http://localhost:8080/#/activePublic,根據我們設置的路由規則，就會顯示step1.vue頁面中的內容,接着完成step1.vue，代碼如下，參考element表單組件
step1.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
|
<template>
// TODO:這個頁面有一個不足之處，時間選擇器組件，表單驗證出錯，這是element組件的問題，留給大家自己去完善
<div class=
"step1"
>
<!-- element表單組件 -->
<el-form :model=
"ruleForm"
class=
"demo-ruleForm"
:rules=
"rules"
ref=
"ruleForm"
label-position=
"top"
>
<!-- 表單項，prop屬性表示要進行表單驗證，驗證規則對應為rules的屬性name -->
<el-form-item label=
"活動名稱"
prop=
"name"
>
<el-input v-model=
"ruleForm.name"
size=
"large"
></el-input>
</el-form-item>
<el-form-item label=
""
prop=
"fenLei"
>
<!-- 改裝后的表單項，在標簽欄添加了一個按鈕 -->
<el-row style=
"height: 35px;"
type=
"flex"
align=
"middle"
>
<el-col :span=
"3"
style=
"width: 90px;"
>
<div class=
"el-form-item__label"
style=
"padding-bottom: 0;"
> 活動分類</div>
</el-col>
<el-col class=
""
:span=
"2"
>
<el-button type=
"text"
@click.native=
"dialogFormFenLeiVisible = true"
style=
"margin: 0;padding: 0;"
>設置</el-button>
</el-col>
</el-row>
<el-radio-group v-model=
"ruleForm.fenLei"
>
<el-radio v-
for
=
"item of ruleForm.fenLeis"
:label=
"item.name"
></el-radio>
</el-radio-group>
</el-form-item>
<!-- 這里有一個坑，活動標簽並不是一個表單元素，無法使用element自帶的驗證功能 -->
<el-form-item label=
"活動標簽"
required>
<el-tag
v-
for
=
"tag in ruleForm.tags"
:closable=
"true"
type=
"primary"
@close=
"handleClose(tag)"
>
{{tag.name}}
</el-tag>
<el-button icon=
"plus"
size=
"large"
@click.native=
"showDialog"
style=
"vertical-align: middle;margin: 10px;"
></el-button>
<transition name=
"fade"
>
<div class=
"el-form-item__error"
v-show=
"tagsValid"
>{{ tagsError }}</div>
</transition>
</el-form-item>
<el-form-item label=
"活動時間"
required style=
"width: 750px;"
>
<el-col :span=
"5"
>
<!-- 時間選擇器，表單驗證時也有點坑，報錯異常，建議不用element自帶表單驗證，自己寫驗證規則 -->
<el-form-item prop=
"activeStartTimeDate"
>
<el-date-picker
v-model=
"ruleForm.activeStartTimeDate"
type=
"date"
placeholder=
"活動開始日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"activeStartTimeTime"
>
<el-time-select
placeholder=
"請選擇時間點"
v-model=
"ruleForm.activeStartTimeTime"
:picker-options=
"{start: '00:00',step: '00:15',end: '23:45'}"
>
</el-time-select>
</el-form-item>
</el-col>
<el-col :span=
"1"
style=
"text-align: center;"
>—</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"activeEndTimeDate"
>
<el-date-picker
v-model=
"ruleForm.activeEndTimeDate"
type=
"date"
placeholder=
"活動結束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"activeEndTimeTime"
>
<el-time-select
placeholder=
"請選擇時間點"
v-model=
"ruleForm.activeEndTimeTime"
:picker-options=
"{start: '00:00',step: '00:15',end: '23:45'}"
>
</el-time-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label=
"報名時間"
required style=
"width: 750px;"
>
<el-col :span=
"5"
>
<el-form-item prop=
"signStartTimeDate"
>
<el-date-picker
v-model=
"ruleForm.signStartTimeDate"
type=
"date"
placeholder=
"報名開始日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"signStartTimeTime"
>
<el-time-select
placeholder=
"請選擇時間點"
v-model=
"ruleForm.signStartTimeTime"
:picker-options=
"{start: '00:00',step: '00:15', end: '23:45'}"
>
</el-time-select>
</el-form-item>
</el-col>
<el-col :span=
"1"
style=
"text-align: center;"
>—</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"signEndTimeDate"
>
<el-date-picker
v-model=
"ruleForm.signEndTimeDate"
type=
"date"
placeholder=
"報名結束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span=
"5"
>
<el-form-item prop=
"signEndTimeTime"
>
<el-time-select
placeholder=
"請選擇時間點"
v-model=
"ruleForm.signEndTimeTime"
:picker-options=
"{start: '00:00',step: '00:15',end: '23:45'}"
>
</el-time-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label=
"活動地點"
required >
<!-- 自己封裝的一個二級聯動地址選擇器 -->
<address-select
:province=
"ruleForm.province"
:city=
"ruleForm.city"
:detail=
"ruleForm.detail"
:isAddressTrue=
"isAddressTrue"
></address-select>
</el-form-item>
<el-form-item label=
"活動人數"
>
<el-row>
<el-col :span=
"6"
style=
"width: 187px;"
>
<el-radio class=
"radio"
v-model=
"ruleForm.activePerson"
label=
"無限制"
>無限制</el-radio>
<el-radio class=
"radio"
v-model=
"ruleForm.activePerson"
label=
"限制"
>限制</el-radio>
</el-col>
<el-col :span=
"6"
>
<el-input placeholder=
"0"
:number=
"true"
size=
"large"
v-model=
"ruleForm.activePersonNum"
:disabled=
" ruleForm.activePerson == '無限制' "
><template slot=
"append"
>人</template></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label=
"活動封面"
>
<el-upload action=
"http://jsonplaceholder.typicode.com/"
type=
"drag"
:multiple=
"true"
:on-preview=
"handlePreview"
:on-remove=
"handleRemove"
:on-success=
"handleSuccess"
:on-error=
"handleError"
>
<i class=
"el-icon-upload"
></i>
<div class=
"el-dragger__text"
>將文件拖到此處，或<em>點擊上傳</em></div>
<div class=
"el-upload__tip"
slot=
"tip"
>只能上傳jpg/png文件，且不超過2M</div>
</el-upload>
</el-form-item>
<el-form-item label=
"活動簡介"
>
<el-input
type=
"textarea"
placeholder=
"請輸入內容"
:autosize=
"{minRows: 4, maxRows: 8}"
v-model=
"ruleForm.activeDescribe"
>
</el-input>
</el-form-item>
<el-form-item label=
"報名用戶信息展示"
>
<el-radio-group v-model=
"ruleForm.UseMsgShow"
>
<el-radio label=
"不展示"
></el-radio>
<el-radio label=
"展示報名人數"
></el-radio>
<el-radio label=
"展示報名清單"
></el-radio>
<el-radio label=
"報名成功顯示完整用戶資料"
></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label=
"評價功能"
>
<el-radio-group v-model=
"ruleForm.evaluate"
>
<el-radio label=
"不開啟"
></el-radio>
<el-radio label=
"實時評價"
></el-radio>
<el-radio label=
"審核后評論"
></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label=
""
>
<el-row>
<div class=
"el-form-item__label"
> 贊助廣告</div>
<el-col class=
"el-form-item__label is-active"
:span=
"2"
>
<el-button type=
"text"
@click.native=
"openAd"
>開通贊助廣告</el-button>
</el-col>
</el-row>
<el-upload action=
"http://jsonplaceholder.typicode.com/"
type=
"drag"
:multiple=
"true"
:on-preview=
"handlePreview"
:on-remove=
"handleRemove"
:on-success=
"handleSuccess"
:on-error=
"handleError"
>
<i class=
"el-icon-upload"
></i>
<div class=
"el-dragger__text"
>將文件拖到此處，或<em>點擊上傳</em></div>
<div class=
"el-upload__tip"
slot=
"tip"
>圖片尺寸建議比例1；4.18，如160*666像素，且不超過2M</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-input
placeholder=
"請填寫您的廣告標題"
size=
"large"
v-model=
"ruleForm.adTitle"
>
</el-input>
</el-form-item>
<el-form-item>
<el-input
placeholder=
"請填寫您的廣告內容"
size=
"large"
v-model=
"ruleForm.adContent"
>
</el-input>
</el-form-item>
<el-form-item >
<el-input
placeholder=
"請填寫您的贊助鏈接"
size=
"large"
v-model=
"ruleForm.adLink"
>
</el-input>
</el-form-item>
</el-form>
<!-- 彈框 -->
<el-dialog title=
"添加活動標簽"
v-model=
"dialogFormVisible"
top=
"35%"
>
<el-form :model=
"dialogForm"
>
<el-form-item>
<el-input v-model=
"dialogForm.name"
auto-complete=
"off"
></el-input>
</el-form-item>
</el-form>
<span slot=
"footer"
class=
"dialog-footer"
>
<el-button @click.native=
"dialogFormVisible = false"
>取 消</el-button>
<el-button type=
"primary"
@click.native=
"handleAdd(dialogForm.name,dialogForm,ruleForm.tags)"
>添加</el-button>
</span>
</el-dialog>
<!-- 設置活動分類 -->
<el-dialog title=
"設置活動分類"
v-model=
"dialogFormFenLeiVisible"
>
<el-form :model=
"dialogFormFenLei"
>
<el-form-item>
<el-tag
v-
for
=
"feiLei of ruleForm.fenLeis"
:closable=
"true"
type=
"primary"
@close=
"handleCloseFenLei(feiLei)"
>
{{ feiLei.name }}
</el-tag>
</el-form-item>
<el-form-item>
<el-input v-model=
"dialogFormFenLei.name"
auto-complete=
"off"
></el-input>
</el-form-item>
</el-form>
<span slot=
"footer"
class=
"dialog-footer"
>
<el-button @click.native=
"dialogFormFenLeiVisible = false"
>取 消</el-button>
<el-button type=
"primary"
@click.native=
"handleAdd(dialogFormFenLei.name,dialogFormFenLei,ruleForm.fenLeis)"
>添加</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// 地址選擇器組件
import addressSelect from
'src/components/address.vue'
export
default
{
name:
'step1'
,
// 組件
components: {
'address-select'
: addressSelect
},
data:
function
() {
return
{
tagsValid:
false
,
// 活動標簽是否合法
tagsError:
'請設置標簽'
,
// 活動標簽不合法的提示信息
isAddressTrue:
false
,
// 地址是否正確
dialogFormVisible:
false
,
// 添加活動標簽的對話框可見？
dialogFormFenLeiVisible:
false
,
// 分類對話框可見？
dialogForm:{name:
''
},
// 活動標簽對話框表單
dialogFormFenLei:{name:
''
},
// 活動分類對話框表單
ruleFormChange:
false
,
// ruleForm表單是否改變？
ruleFormValid:
false
,
// ruleForm是否合法？
rules: {
// 表單驗證規則
name:[
{required:
true
,message:
'請輸入活動名稱'
,trigger:
'change'
}
],
fenLei:[
{required:
true
,message:
'請選擇活動分類'
,trigger:
'change'
}
],
activeStartTimeDate: [{required:
true
,message:
'請選擇活動開始日期'
,trigger:
'change'
}],
activeStartTimeTime: [{required:
true
,message:
'請選擇活動開始時間'
,trigger:
'change'
}],
activeEndTimeDate: [{required:
true
,message:
'請選擇活動結束日期'
,trigger:
'change'
}],
activeEndTimeTime: [{required:
true
,message:
'請選擇活動結束時間'
,trigger:
'change'
}],
signStartTimeDate: [{required:
true
,message:
'請選擇報名開始日期'
,trigger:
'change'
}],
signStartTimeTime: [{required:
true
,message:
'請選擇報名開始時間'
,trigger:
'change'
}],
signEndTimeDate: [{required:
true
,message:
'請選擇報名截止日期'
,trigger:
'change'
}],
signEndTimeTime: [{required:
true
,message:
'請選擇報名截止時間'
,trigger:
'change'
}],
},
ruleForm: {
// step1頁面的表單，記錄頁面所有表單信息
name:
''
,
// 活動名稱
fenLeis:[
// 活動分類選項
{name:
'未發布'
},
{name:
'測試活動'
},
{name:
'精彩活動'
}
],
fenLei:
''
,
// 當前選中的活動分類
tags: [],
// 活動標簽
activeStartTimeDate:
''
,
// 活動開始時間
activeStartTimeTime:
''
,
// 活動結束時間
activeEndTimeDate:
''
,
activeEndTimeTime:
''
,
signStartTimeDate:
''
,
signStartTimeTime:
''
,
signEndTimeDate:
''
,
signEndTimeTime:
''
,
activePerson:
''
,
// 是否限制活動人數?
activePersonNum:
''
,
// 限制多少人?
activeDescribe:
''
,
// 活動簡介
UseMsgShow:
''
,
// 報名活動信息展示
evaluate:
''
,
// 評價功能
adTitle:
''
,
// 廣告標題
adContent:
''
,
// 廣告內容
adLink:
''
,
// 贊助鏈接
}
};
},
watch: {
// 監控
ruleForm: {
handler:
function
(val,oldVal) {
store.commit(
'setRuleForm'
,
this
.ruleForm);
this
.tagsValid = !
this
.ruleForm.tags.length ?
''
:
false
;
this
.ruleFormChange =
true
;
},
deep:
true
// 深度監控，可以觀察到ruleForm內任意屬性的變化
}
},
methods: {
handleRemove:
function
(file, fileList) {
console.log(file, fileList);
},
handlePreview:
function
(file) {
console.log(file);
},
handleSuccess:
function
() {
},
handleError:
function
() {
},
// 顯示添加活動標簽對話框
showDialog:
function
() {
if
(
this
.ruleForm.tags.length >=5 ){
this
.$message({
message:
'最多設置5個標簽'
,
type:
'warning'
});
}
else
{
this
.dialogFormVisible =
true
;
this
.dialogForm = {};
}
},
// 刪除活動標簽
handleClose:
function
(tag) {
var
index =
this
.ruleForm.tags.indexOf(tag);
this
.ruleForm.tags.splice(index,1);
},
// 刪除活動分類的某一項
handleCloseFenLei:
function
(fenLei){
var
index =
this
.ruleForm.fenLeis.indexOf(fenLei);
this
.ruleForm.fenLeis.splice(index,1);
},
// 添加標簽
handleAdd:
function
(tag,form,tags) {
if
(tag && tag.trim().length !== 0){
var
isExist =
false
;
tag = tag.trim();
for
(
var
i=0;i<tags.length; i++){
if
(tags[i].name == tag ){
isExist =
true
;
break
}
}
if
(isExist){
this
.$message({
message:
'該標簽已存在'
,
type:
'warning'
});
}
else
{
this
.dialogFormVisible =
false
;
this
.dialogFormFenLeiVisible =
false
;
tags.push({
name: tag
});
}
}
else
{
this
.$message({
message:
'標簽不能為空'
,
type:
'warning'
});
}
},
openAd:
function
(){
this
.$message(
'該功能正在完善'
);
},
},
// 頁面初始化
created:
function
(){
}
}
</script>
<style>
.step{margin-bottom: 30px;}
.step1 .demo-ruleForm .el-form-item{margin-bottom: 25px;margin-right: 50px;}
.step1 .el-form-item.is-required .el-form-item__label:after {
content:
'*'
;
color:
#ff4949;
margin-right: 4px;
}
.step1 .el-form-item.is-required .el-form-item__label:before { display: none; }
/* 標簽 */
.step1 .el-tag{padding: 10px 15px;margin:10px;vertical-align: middle;}
.step1 .el-tag:first-child{margin-left: 0;}
/* 對話框 */
.step1 .el-dialog--small{width: 564px;}
.step1 .el-dialog__body{padding-bottom: 0;}
.step1 .el-dialog__body .el-form-item{margin-bottom: 10px;}
.step1 .el-dialog__wrapper .el-button{margin-left: 15px;}
/* 時間選擇器 */
.step1 .el-date-editor{width:150px;}
.step1 .el-form-item .router-link{color:
#fff;}
.el-form-item__error{white-space: nowrap;}
</style>
|
這個頁面的大部分是使用的element組件，請自行對照官網實現。在這個頁面中封裝了一個二級地址選擇插件，稍后會專門寫一篇文章，詳細介紹如何封裝組件，先為大家奉上地址選擇器源碼。
10. 重新啟動項目,cnpm run dev,檢查頁面上的功能是否都已經實現，是否有報錯，如果有解決不了的錯誤，歡迎留言咨詢，我會第一時間為您解答。
以上所述是小編給大家介紹的使用vue.js2.0 + ElementUI開發后台管理系統詳細教程（二），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
原文地址：http://www.jb51.net/article/103779.htm