Vue.js2+vue-router+Element-ui新手实践

接上一篇:   Vue.js+vue-router新手实践

这一篇,我们将引入elemen-ui,开发一个简单的单页面应用。

首先,引入element-ui,参考element-ui官网


安装方式

这里建议npm安装,可以更好的配合webpack打包

安装好了,我们要引入element-ui(全局引入):


在main.js中全局引入


当然,如果你只想在一个单独的页面使用也可以(按需引入):


element-ui 官网介绍的方法,可以自己去看


开始使用

接下来,我们要开发这样一个后台页面


从网上找的模板

具体的过程就不加赘述,对于需要的内容,可以在element文档中找到,自己需要的格式,直接复制到自己代码中,然后按照自己的需要改变颜色或者其他(其实elemen-ui颜色配置还是我很喜欢的)。

这个是我 router配置:


router配置

我实现后的页面是这样的:


修改的后台页面

还是很多地方没有写好,后期会继续完善,如果对你有用,可以去下面的地址下载源码,可以star或者follow,我会继续更新的!

源码地址 :后台demo地址

下载之后

cd进入文件夹

npm install

npm run dev

就可以启动项目了

推荐阅读更多精彩内容