一.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. VirtualBox 使用物理硬盘

    /******************************************************************************* * VirtualBox 使用物理硬盘 ...

  2. CentOS 7 / RHEL 7:修改OpenSSH 默认端口

    1.备份sshd_config cp -p /etc/ssh/sshd_config /etc/ssh/sshd_config.orig.$(date +%F) 2.vi /etc/ssh/sshd_ ...

  3. 14JDBC

    一.JDBC简介 全名:java database connection java代码与数据库相连的工具,java>JDBC>(oracle  mysql sql server) 二.四大 ...

  4. jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)

    1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同 (1) append()方法: $("#test&quo ...

  5. mysql的常用操作

    基本操作 #1 操作文件夹(库) 增 create database db1 charset utf8; --指定格式为utf8 查 show databases; --查看所有的数据库 show c ...

  6. mysql 中文支持

    show variables like 'character%';  SHOW VARIABLES LIKE 'collation_%'; recommend to use utf8mb4 inste ...

  7. SDL播放YUV----单帧

    用到的项目:Tocy-Android-SDLv2 C中的 入口: main.c as_lesson_XXX.c bmp_main : 在C中定义文件的路径: char *filepath = &quo ...

  8. unity 面试题(答案)

    一.什么是渲染管道?是指在显示器上为了显示出图像而经过的一系列必要操作.渲染管道中的很多步骤,都要将几何物体从一个坐标系中变换到另一个坐标系中去.主要步骤有:本地坐标->视图坐标->背面裁 ...

  9. (转)volatile 的理解

    对于(volatile unsigned char *)0x20我们再分析一下,它是由两部分组成: 1) (unsigned char *)0x20,0x20只是个值,前面加(unsigned cha ...

  10. FlexRay通信机制

    通信周期是 FlexRay 的基本通信单元[6~7,19].每个通信周期包括四个时间层,如图 2-9 所示.通信周期由静态段(Static Segment).动态段(Dynamic Segment). ...