这一篇,我们将引入elemen-ui,开发一个简单的单页面应用。
首先,引入element-ui,参考element-ui官网。
![](https://img.haomeiwen.com/i4274282/1dacdadf2039cbbd.png)
这里建议npm安装,可以更好的配合webpack打包
安装好了,我们要引入element-ui(全局引入):
![](https://img.haomeiwen.com/i4274282/7850d19be5a2da5b.png)
当然,如果你只想在一个单独的页面使用也可以(按需引入):
![](https://img.haomeiwen.com/i4274282/9c941524a90604ee.png)
![](https://img.haomeiwen.com/i4274282/165412dee5639a74.png)
接下来,我们要开发这样一个后台页面
![](https://img.haomeiwen.com/i4274282/4315ec47c955ef64.png)
具体的过程就不加赘述,对于需要的内容,可以在element文档中找到,自己需要的格式,直接复制到自己代码中,然后按照自己的需要改变颜色或者其他(其实elemen-ui颜色配置还是我很喜欢的)。
这个是我 router配置:
![](https://img.haomeiwen.com/i4274282/7e8ca4e77b31b5b5.png)
我实现后的页面是这样的:
![](https://img.haomeiwen.com/i4274282/550454c5f844ce47.png)
还是很多地方没有写好,后期会继续完善,如果对你有用,可以去下面的地址下载源码,可以star或者follow,我会继续更新的!
源码地址 :后台demo地址
下载之后
cd进入文件夹
npm install
npm run dev
就可以启动项目了
网友评论