在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到。

首先我们先vue create demo创建一个项目出来此时我们的项目是这样的

此时我们在终端输入

vue add element

  

可以看到让我们选择全部引入还是按需引入,此时我们选择按需引入,Import on demand

然后选择zh-CN,这时候我们可以看到此处多了一个plugins的文件夹,里面有一个element.js的文件,并且main.js中多了一个import的内容。然后如果我们仔细观察的话会发现其实babel.config.js也是注入了相关内容的。

从element官网我们可以看到是按照这种方式按需引入的,但是使用vue add element的这种方式的话,则无需按照这种方式进行单独配置。

那么element.js文件是什么呢?我们且来一看,我们具体是如何按需引入的呢?

然后我们就可以直接在页面直接使用啦,注意使用element的哪一个组件的话,都需要在本文件进行引入、使用的。

vue按需引入Element UI的方法的更多相关文章

  1. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

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

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

  3. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  4. vue按需引入第三方ui插件优化

    components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...

  5. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

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

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

  7. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  8. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  9. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

随机推荐

  1. Tableau Sheet

    通过Tableau Sheet自带的超市数据给出几种图表. 在左侧数据Data栏有一列是Dimenslons是维度,下面Measures是测度,维度可以理解为你需要筛选的条件,比如根据年份看,根据地区 ...

  2. CAP 与 注册中心

    https://blog.csdn.net/fly910905/article/details/100023415 http://www.ruanyifeng.com/blog/2018/07/cap ...

  3. SpringCloud使用feign时的复杂参数传递(转)

    Feign传参注意 最近在用SpringCloud尝试重构以前的项目,使用Feign客户端组件来调用微服务,经常出现参数传不过去变成null的问题,网上查了一下发现feign在参数上的使用还是有一定的 ...

  4. JAVA笔记4-static关键字

    1.static方法中不能使用this关键字 2.例题:static成员变量用于计数     

  5. Activiti使用

    Activiti是一个开源的工作流引擎,它实现了BPMN 2.0规范,可以发布设计好的流程定义,并通过api进行流程调度. Activiti 作为一个遵从 Apache 许可的工作流和业务流程管理开源 ...

  6. 7、菜单栏、工具栏、状态栏、浮动窗口、TextEdit

    新建项目,基类选择QMainWindow,不勾选ui    mainwindow.cpp代码: #include "mainwindow.h" #include <QMenu ...

  7. gulp[13124]: c:\ws\src\node_contextify.cc:626: Assertion `args[1]->IsString()' failed

    在执行gulp sass时报下面错误,又或者执行ionic serve时报这个错,选择低一点版本的node,建议8v; gulp[13124]: c:\ws\src\node_contextify.c ...

  8. HDU 6444 Neko's loop ( 2018 CCPC 网络赛 && 裴蜀定理 && 线段树 )

    题目链接 题意 : 给出一个 n 个元素的环.可以任意选择起点.选完起点后.可以行走 m 步.每次前进 k 个单位.所走到的点将产生正或负贡献.问你一开始得准备多少才能使得初始资金加上在环上获取最大利 ...

  9. Travis CI Could not find or load main class org.gradle.wrapper.GradleWrapperMain 错误

    问题 在 Travis CI 编译的时候出现 Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain ...

  10. 哈密尔顿环x

    欧拉回路是指不重复地走过所有路径的回路,而哈密尔顿环是指不重复地走过所有的点,并且最后还能回到起点的回路.  代码如下: #include<iostream> #include<cs ...