在上篇文章给大家介绍了
1. 引入路由工具vue-router,切换视图
2. 使用vue-router
3. 配置路由
在src目录下新建router-config.js,在router-cinfig.js中里面配置路由
4. 使用路由
5. 打开activePublic/index.vue文件,在页面随便写点东西,测试一下,路由是否配置成功
6. 启动项目cnpm run dev,看到如下页面,说明路由配置成功
7. 接下来,在activePublic/index.vue直接调用element-ui组件,完成活动发布的首页,完成好的代码如下
上面这个页面又出现了一个router-view,为什么要这样放呢?因为step1、step2、step3、step4四个页面都含有顶部的"步骤"组件,所以这里把step1/2/3/4单独提出来放在4个页面中
8. 在router-config.js文件中配置二级路由
9. 重新启动项目cnpm run dev,在浏览器中默认路径为,根据我们设置的路由规则,就会显示step1.vue页面中的内容,接着完成step1.vue,代码如下,参考element表单组件
step1.vue
这个页面的大部分是使用的element组件,请自行对照官网实现。在这个页面中封装了一个二级地址选择插件,稍后会专门写一篇文章,详细介绍如何封装组件,先为大家奉上。
10. 重新启动项目,cnpm run dev,检查页面上的功能是否都已经实现,是否有报错,如果有解决不了的错误,欢迎留言咨询,我会第一时间为您解答。
以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/vue/42257.html