详解Vue与element-ui整合方式

目录
  • 一、Vue与element-ui整合
    • 1.安装element-ui:
    • 2.引入ElementUI:
    • 3.按需引入ElementUI元素即可
    • 4.使用组件渲染UI效果

一、Vue与element-ui整合

element-ui官网介绍很详细，这里摘抄官网的融入方式：

1.安装element-ui:

npm i element-ui -S

2.引入ElementUI:

分为全部引入和部分引入，因为全部引入文件体积太大，这里直接部分引入：
按需引入，需要借助一个插件，安装插件:

npm install babel-plugin-component -D

修改babel.config.js文件:
(注意:官网写的修改babelrc文件，新版本vue-cli修改babel.config.js文件，element-ui官网更新比较慢，所以说的还是旧版本文件)

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

上述代码是官网上修改babel.config.js的代码，这里需要注意的是，我们原本项目中babel.config.js里的内容，不要去掉，而是追加上面的这些代码到babel.config.js里面，最终整合后的babel.config.js的代码如下:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.按需引入ElementUI元素即可

比如，引入Button和Select，则在main.js中:
引入组件：

mport { Button, Select } from 'element-ui';

注册组件:

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

或者:

* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

**注意：**由于label版本等问题，按照官网的操作后，vue-cli工程可能会发生启动报错，可参考这篇文章进行版本的设置和修改：https://zhuanlan.zhihu.com/p/217728852

4.使用组件渲染UI效果

使用element-ui后，所有的组件都可以使用element-ui进行界面渲染了，使用哪个组件，在官网中找到对应的组件介绍，使用即可。以Button为例：

划到最下面，还有Attributes和函数的介绍

说明：按需引入element-ui后，无需再关注引入哪个css样式了，会按照使用的组件，自动引入相关的样式

到此这篇关于Vue与element-ui整合的文章就介绍到这了,更多相关Vue与element-ui整合内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    目录 图片上传(ImageCropper) 文件上传(el-upload) 注意 图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数,后端返回OSS生成的图片访问地址,然后cropsuccess函数将上传成功的图像进行显示. <template> <div class="app-container"> <!-- 讲师头像 --> <el-form-item labe

  • Vue element-ui表格内嵌进度条功能实现方法

    Vue element-ui表格内嵌进度条功能实现方法

    目录 一.引言 二.方法 三.实验结果与讨论 1.前期准备工作 2.实现功能 3完整实验代码 四.结语 一.引言 在着手做项目时,尤其是后台管理系统类的项目,不难会遇到,数据用进度条的形式呈现,可视化. 二.方法 本次实验主要应用element组件中的progress. 需要使用到属性: Type 进度条类型line/circle/dashboard :text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用) :percentage 百分比(必填) :color

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • Vue Element-ui实现树形控件节点添加图标详解

    Vue Element-ui实现树形控件节点添加图标详解

    目录 1.效果图 2.树形表格绑定数据加标签 3.所有代码 其他实现 总结 1.效果图 2.树形表格绑定数据加标签 想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon children: [ { icon:'el-icon-top-right', label: ['beam名称',''], children: [ { label:['name','RS49'], }, { icon:'src/assets/images/Organization

  • 关于vue中element-ui form或table lable换行的问题

    关于vue中element-ui form或table lable换行的问题

    element-ui form或table lable换行问题 今天在写项目,突然遇到个需求,需要将form里面的lable换行,百度了下,发现了一个办法,特此记录下来 First,我们先要在我们的lable里面进行以下操作 :label="'机组: \n(xxx用)'" 双引号嵌套单引号 在需要换行的文字中间 加入\n 换行符 Second,再添加css的样式 /deep/ .el-form-item__label{ white-space:pre-line; } //如果是tabl

  • 详解Vue的七种传值方式

    1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式).如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了. 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解vue父子组件状态同步的最佳方式

    哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 一文详解Vue如何整合Echarts实现可视化界面

    一文详解Vue如何整合Echarts实现可视化界面

    目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript

  • 详解vue的数据binding绑定原理

    详解vue的数据binding绑定原理

    自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般

  • 详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解 思路每前进一步要能够得出结论 尽量总结归纳出流程图 应用

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • 详解Vue的options

    详解Vue的options

    1. options 是什么 无论是 jQuery.js 还是 Vue.js,都是在 js 的基础上再次封装的库,都需要创建对应的实例来封装对应的操作.如通过 $('div') 获得一个 jQuery 的 div元素 实例,也称为 jQuery 对象,jQuery 对象包含了对选中的 div元素 的各种操作API,因此 jQuery 实例封装的是对选中元素的各种操作. 而 Vue.js 在此基础上更近一步,封装了对视图的所有操作,包括数据的读写.数据变化的监听.DOM元素的更新等等,通过 new

随机推荐