一.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. C语言权威指南和书单 - 中等级别

    注:点击标题免费下载电子书 1. Object-oriented Programming with ANSI-C 2. C Interfaces and Implementations 3. 21st ...

  2. React-redux深入理解

    首先,一张 Redux 解释图镇楼: [回顾]Redux 的核心: store 是什么?(createStore 函数的实现) const store = createStore(reducer); ...

  3. Python IO密集型任务、计算密集型任务,以及多线程、多进程

    对于IO密集型任务: 直接执行用时:10.0333秒 多线程执行用时:4.0156秒 多进程执行用时:5.0182秒 说明多线程适合IO密集型任务. 对于计算密集型任务 直接执行用时:10.0273秒 ...

  4. Python学习之路基础篇--04Python基础+数据类型

    1 int 只需知道 i.bit_length() 是算其二进制的位数, 如3 就是2: 5就是 3. 2 bool 要知道 while True == while 1   :除零以外的所有数都为真 ...

  5. PAT乙级考前总结(五)

    字符串处理 1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否 ...

  6. uva 202

    #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> # ...

  7. uwp应用在debug模式下运行正常,编译为release版本的时候抛出异常

    原因是在代码中使用了dynamic关键字,导致release时.net native优化了代码造成元数据丢失 所以在代码中要尽量不用dynamic.

  8. 本地复现Flash 0day漏洞(CVE-2018-4878)

    影响版本: Adobe Flash Player <= 28.0.0.137 EXP下载地址: 链接: https://pan.baidu.com/s/1_VVQfdx6gsJvEDJj51Jg ...

  9. html基础学习笔记1

    <!DOCTYPE html> 声明为 HTML5 文档  <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(meta)数据,如 &l ...

  10. cookie 就是一些字符串信息

    什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用JavaScript 来创建和取回cookie 的 ...