element-ui的基本使用（一）

2024-05-10 18:23:47

本章讲的是element-ui在vue中的用法

开发准备

废话不多说直接上教程
在使用element-ui之前我们需要有自己的开发环境，也就是自己的电脑里安装了最新的稳定版的node.js
这个就不多说了，安装之后直接点下一步就行了，其次还要使用vue脚手架，搭建webpack开发环境。

element-ui开发操作

我们首先需要打开官网，看着官方文档，有了文档的参考，我们下次在去用的时候就很方便了。
官方文档: element-ui

打开后我们找到组件菜单，直接看开发指南这个板块；

一、推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
这是官方推荐使用的工具，所以我们在使用包工具打包的时候，也建议使用官方推荐的。
我们可以通过 npm i element-ui -S 进行安装
关于 -S -D的介绍可以看 -S -D: 点击介绍

二、引入组件
通过使用 node.js 中的语法import 在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 的引入。需要注意的是，样式文件需要单独引入。
三、说道这里可能有的人会觉得引入整个element-ui应该太大了，我们应该用什么引什么，在框架中这叫按需引入，element-ui目前页支持按需引入

按需引入方法

使用按需引入我们需要借助 babel-plugin-component，可以到到只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

然后，将 .babelrc 修改为：

  "presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from ‘vue’;
import { Button, Select } from ‘element-ui’;
import App from ‘./App.vue’;

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为

Vue.use(Button)
Vue.use(Select)
*/

new Vue({
el: ‘#app’,
render: h => h(App)
});

element-ui的基本使用（一）相关推荐

charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...

最新文章

热门文章