这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），非常不错，具有参考借鉴价值，需要的朋友参考下吧
在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
1. 引入路由工具vue-router，切换视图
# 安装vue-router cnpm install vue-router --save-dev
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) })
3. 配置路由
在src目录下新建router-config.js，在router-cinfig.js中里面配置路由
// 引入组件 import activePublic from './page/activePublic/index.vue' export default [ { // 配置路由，当路径为'/activePublic',使用组件activePublic path:'/activePublic',component:activePublic, } ]
4. 使用路由
app.vue <div id="app"> <!-- 头部导航 --> ... <!-- 左侧导航 --><div class="main-left"> ... </div><!-- 右侧主内容区 --><div class="main-right"> <!-- 视图 --></div></div>
5. 打开activePublic/index.vue文件，在页面随便写点东西，测试一下，路由是否配置成功
<div class="activePublic"> <!-- element步骤组件 -->
6. 启动项目cnpm run dev，看到如下页面，说明路由配置成功
7. 接下来，在activePublic/index.vue直接调用element-ui组件，完成活动发布的首页，完成好的代码如下
activePublic/index.vue <div class="activePublic"> <!-- 步骤组件 --> <!-- 视图 --><div class="but-group"> 预览上一步下一步发布活动</div></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 } ] } ]
9. 重新启动项目cnpm run dev,在浏览器中默认路径为http://localhost:8080/#/activePublic,根据我们设置的路由规则，就会显示step1.vue页面中的内容,接着完成step1.vue，代码如下，参考element表单组件
step1.vue
// TODO:这个页面有一个不足之处，时间选择器组件，表单验证出错，这是element组件的问题，留给大家自己去完善 <div class="step1"> <!-- element表单组件 --> <!-- 表单项，prop属性表示要进行表单验证，验证规则对应为rules的属性name --> <!-- 改装后的表单项，在标签栏添加了一个按钮 --> <div class="el-form-item__label" style="padding-bottom: 0"> 活动分类</div> 设置 <!-- 这里有一个坑，活动标签并不是一个表单元素，无法使用element自带的验证功能 --> {{tag.name}} <div class="el-form-item__error">{{ tagsError }}</div> <!-- 时间选择器，表单验证时也有点坑，报错异常，建议不用element自带表单验证，自己写验证规则 --> ― ― <!-- 自己封装的一个二级联动地址选择器 --> 无限制限制 人 <i class="el-icon-upload"></i><div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div> <div class="el-form-item__label"> 赞助广告</div> 开通<strong>本文来源gaodai#ma#com搞@代~码^网+</strong>赞助广告 <i class="el-icon-upload"></i><div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip">图片尺寸建议比例1；4.18，如160*666像素，且不超过2M</div> <!-- 弹框 --> <span class="dialog-footer"> 取 消添加</span><!-- 设置活动分类 --> {{ feiLei.name }} <span class="dialog-footer"> 取 消添加</span></div> .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;}
这个页面的大部分是使用的element组件，请自行对照官网实现。在这个页面中封装了一个二级地址选择插件，稍后会专门写一篇文章，详细介绍如何封装组件，先为大家奉上地址选择器源码。
10. 重新启动项目,cnpm run dev,检查页面上的功能是否都已经实现，是否有报错，如果有解决不了的错误，欢迎留言咨询，我会第一时间为您解答。
以上就是使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）
