欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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);

vue快速入门之ElementUI的使用

使用

再官网左侧有各种组件供我们选择
vue快速入门之ElementUI的使用
随便找一个Table表格
vue快速入门之ElementUI的使用
点击显示代码,然后复制整段代码
vue快速入门之ElementUI的使用
然后随便写一个页面将代码粘贴过去
vue快速入门之ElementUI的使用
然后配置一下路由,路由的详细用法参考我上篇博客这里不多赘述:https://blog.csdn.net/weixin_46214451/article/details/106826885
vue快速入门之ElementUI的使用
启动服务
vue快速入门之ElementUI的使用
我这里选了一个很简单的页面做测试,ElementUI有很多好看的组件,只要复制下来自己进行一些简单的改动就可以使用了,非常简单方便。

相关标签: vue