一.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. Feign源码解析系列-那些注解们

    开始 Feign在Spring Cloud体系中被整合进来作为web service客户端,使用HTTP请求远程服务时能就像调用本地方法,可见在未来一段时间内,大多数Spring Cloud架构的微服 ...

  2. Java基于opencv—透视变换矫正图像

    很多时候我们拍摄的照片都会产生一点畸变的,就像下面的这张图 虽然不是很明显,但还是有一点畸变的,而我们要做的就是把它变成下面的这张图 效果看起来并不是很好,主要是四个顶点找的不准确,会有一些偏差,而且 ...

  3. jquery Ajax 实现图片上传的功能。

    $('#image').on('change', function () {         var url = "";         var form = new FormDa ...

  4. Python中的常用魔术方法介绍

    1.__init__ 初始化魔术方法 触发时机:初始化对象时触发(不是实例化触发,但是和实例化在一个操作中) 参数:至少有一个self,接收对象 返回值:无 作用:初始化对象的成员 注意:使用该方式初 ...

  5. 只有mdf文件和ldf文件--怎么恢复数据库

    1.将mdf和ldf放到你电脑的路径中. 2.执行以下语句 USE master; GO CREATE DATABASE DBName ON (FILENAME = 'C:\Program Files ...

  6. sed常用操作命令

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据进行替换.删除.新增.选取等特定工作. 命令格式: sed [OPTION]... {script-only-i ...

  7. 几何概型 uva11722

    #include<bits/stdc++.h> using namespace std; int t1,t2,s1,s2,w; int get(int b) { ; int d=s2-s1 ...

  8. vue中父组件给子组件额外添加参数

    1 子组件: this.$emit('callbackone',item.parentId) 2 父组件: @callbackone="callbackone($event,index)&q ...

  9. Hi3519V101+IMX274开发板调试经验

    1.uboot没换 2.内核网络不对,其它的正常, sudo apt-get install libncurses5-dev sudo apt-get install u-boot-tools 3.根 ...

  10. 使用 logrotate 清理日志

    Linux 中配置 logrotate 程序,它可以自动执行日志文件的轮换.压缩.删除和用邮件发出. Linux账号密码过期会导致crontab作业不能执行 Authentication token ...