vue快速入门之ElementUI的使用
程序员文章站
2022-07-01 18:09:39
...
在开发vue项目的时候我们希望快速构建出前端页面,这个时候就需要用到ElementUI组件库了,它和vue结合的非常良好,而且用法也非常简单。
安装
直接去ElementUI官网https://element.eleme.cn/#/zh-CN/component/installation
npm安装(推荐使用cnpm):npm i element-ui -S
引入
再main.js文件中引入ElementUI和CSS组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用
再官网左侧有各种组件供我们选择
随便找一个Table表格
点击显示代码,然后复制整段代码
然后随便写一个页面将代码粘贴过去
然后配置一下路由,路由的详细用法参考我上篇博客这里不多赘述:https://blog.csdn.net/weixin_46214451/article/details/106826885
启动服务
我这里选了一个很简单的页面做测试,ElementUI有很多好看的组件,只要复制下来自己进行一些简单的改动就可以使用了,非常简单方便。
上一篇: python 文件I/O
下一篇: vue中使用ElementUI
推荐阅读
-
HTML5之SVG 2D入门10—滤镜的定义及使用
-
vue升级之路之vue-router的使用教程
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
-
Spring Boot 入门之消息中间件的使用
-
IOS开发入门之storyboard的使用
-
Vue中使用ElementUI使用第三方图标库iconfont的示例
-
Vue项目查看当前使用的elementUI版本的方法
-
Vue.js实战之Vuex的入门教程
-
Python快速入门之迭代器和生成器!最详细的教程!祝早日入门!