本文主要包含vue 后台管理系统,vue.js后台管理系统,后台管理系统,网站后台管理系统,去哪儿网后台管理系统等相关知识,拯救地球好累丫 希望在学习及工作中可以帮助到您
在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
1. 引入路由工具vue-router，切换视图
# 安装vue-router cnpm install vue-router --save-dev</div>
2. 使用vue-router
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)
})
</div>
3. 配置路由
在src目录下新建router-config.js，在router-cinfig.js中里面配置路由
// 引入组件
import activePublic from './page/activePublic/index.vue'
export default [
{
// 配置路由，当路径为'/activePublic',使用组件activePublic
path:'/activePublic',component:activePublic,
}
]
</div>
4. 使用路由
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>
</div>
5. 打开activePublic/index.vue文件，在页面随便写点东西，测试一下，路由是否配置成功
<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></div>
6. 启动项目cnpm run dev，看到如下页面，说明路由配置成功
7. 接下来，在activePublic/index.vue直接调用element-ui组件，完成活动发布的首页，完成好的代码如下
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></div>
上面这个页面又出现了一个router-view，为什么要这样放呢？因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件，所以这里把step1/2/3/4单独提出来放在4个页面中
8. 在router-config.js文件中配置二级路由
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 }
]
}
]
</div>
9. 重新启动项目cnpm run dev,在浏览器中默认路径为http://localhost:8080/#/activePublic,根据我们设置的路由规则，就会显示step1.vue页面中的内容,接着完成step1.vue，代码如下，参考element表单组件
step1.vue
<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>