一.element UI组件的单独使用(第一种方法):

1、cnpm install babel-plugin-component -D    
    2、找到.babelrc 配置文件
        把
        {
          "presets": [
            ["env", { "modules": false }],
            "stage-3"
          ]
        }

改为  注意:    
        {
          "presets": [["env", { "modules": false }]],
          "plugins": [
            [
              "component",
              {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

3、
    import { Button, Select } from 'element-ui';
    Vue.use(Button)
    Vue.use(Select)

二.element UI组件的单独使用(第二种方法):

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

Vue.use(Button)
    Vue.use(Select)

引入对应的css

import 'element-ui/lib/theme-chalk/index.css';

如果报错: webpack.config.js  配置file_loader

{
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
              }

Vue ElementUI 按需引入的更多相关文章

  1. vue+elementui按需引入

    转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...

  2. element-ui按需引入

    { "name": "vue-test2", "description": "A Vue.js project", &q ...

  3. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  4. 从element-ui按需引入去探索

    element-ui的按需引入的配置:文档地址 npm install babel-plugin-component -D { "presets": [["es2015& ...

  5. 解决element-ui按需引入不了Scrollbar的问题

    一.报错原因 在我想按需引入element-ui时,突然报错: 这个报错来的有点措不及防.明明在页面当中能够使用,为仕么在单独引入时却不能引用了,真是百思不得其解. 经过在百度上的查找才知道,原来Sc ...

  6. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  7. ElementUI 按需引入坑爹的点记录

    官网说的是这样的: 但实际上,应该是这样修改: { "presets": [ ["env", { "targets": { "br ...

  8. vue中按需引入mint-UI报Error: .plugins[3][1] must be an object, false, or undefined

    { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugi ...

  9. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

随机推荐

  1. SQLI DUMB SERIES-17

    (1)无论怎么输入username,都没有回显.尝试改变password的输入.找到了闭合方式:单引号 (2)报错注入: 爆库名 admin&passwd=admin' and extract ...

  2. Spock - Document -02 - Spock Primer

    Spock Primer Peter Niederwieser, The Spock Framework TeamVersion 1.1 This chapter assumes that you h ...

  3. Ajax的工作原理以及优缺点

    Ajax的工作原理 : 相当于在客户端与服务端之间加了一个抽象层(Ajax引擎),使用户请求和服务器响应异步化,并不是所有的请求都提交给服务器,像一些数据验证和数据处理 都交给Ajax引擎来完成,只有 ...

  4. antd-vue按需加载插件babel-plugin-import报错

    报错.bezierEasingMixin().百度了一下是Less版本太高的原因,我都迷了,还有太新的过... 解决方法:将less版本降到3.0以下 因为我是用的npm生成的vue项目.所以cmd命 ...

  5. 用shell脚本创建sqlite表并添加sql语句--通用

    重要使用的是EOF的功能,亲测和!功能一致:下面是测试代码 #!/bin/bash val=`ls`for v in ${val} do if [ ${v} == "test.db" ...

  6. cordova文件系统插件的使用方法:cordova-plugin-file

    提供对设备上的文件进行读取和写入的功能支持. 1. 添加插件:cordova plugin add cordova-plugin-file 2. 调用方法:

  7. FCPX插件54种婚礼调色预设ProWedding Mac

    FCPX插件ProWedding Mac是一款由Pixel Film Studio出品的风格婚礼调色预设fcpx插件,prowedding插件包含54种不同效果的调色预设和4种边缘模糊工具,帮您制作出 ...

  8. C# EnumHelper Enum的值,Description,ToString()的相互转换

    首先定义枚举类型,如下: /// <summary> /// 板块 /// </summary> public enum Plate {         [Descriptio ...

  9. Linux内核中常用的数据结构和算法(转)

    知乎链接:https://zhuanlan.zhihu.com/p/58087261 Linux内核代码中广泛使用了数据结构和算法,其中最常用的两个是链表和红黑树. 链表 Linux内核代码大量使用了 ...

  10. VS Code直接编辑下一行

    ctrl + enter 可以直接跳转到下一行进行编辑,本行后面的字符不受影响. 这在书写html脚本时非常有用.