Element-ui入门

最新推荐文章于 2024-08-17 21:49:23 发布

易。安

最新推荐文章于 2024-08-17 21:49:23 发布

阅读量441

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/qq_45126286/article/details/105702818

版权

Element-ui是饿了么团队基于Vue的UI组件库，提供丰富的视图渲染功能，提高开发效率。通过npm安装后，在main.js中引入并使用。文章介绍了基本按钮、输入框和计数器的使用，并建议查看官网获取更多组件。

摘要由CSDN通过智能技术生成

Element-ui是（饿了么团队）基于MVVM框架Vue开源出来的一套前端UI组件，类似的UI框架也非常多，例如i-view，Vuetify等。使用vue搭建前台页面，它会帮助我们进行视图的渲染，但是样式还是需要自己完成。而使用这些组件则可以非常方便完成这些工作，效率更高。
关于Element-ui的介绍官方也有比较详细的资料官方网站
安装的方式也比较多，这里推荐npm安装，它能更好地和 webpack 打包工具配合使用。终端执行命令

npm i element-ui -S

安装完成以后，我们主要在vue项目中使用相应的组件，这里为了方便，采用引入整个 Element，在main.js中添加一下内容

import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import’element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
Vue.use(ElementUI);
new Vue({
el: ‘#app’,
render: h => h(App)
});

需要注意的是，样式文件需要单独引入。当然了，除了常用组件，Element-ui还提供了动画，主题等其他效果。这里介绍几个自己常用的组件
在这里插入图片描述
基本按钮使用：

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
<