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

首先我们先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. Django学习系列12:把Python变量传入模板中渲染

    从视图的Python代码中把变量传入HTML模板. 模板中使用哪种句法引入Python对象,要使用的符号{{...}},它会以字符串的形式显示对象: <html> <head> ...

  2. pidstat 命令详解(转载)

    转自https://www.jianshu.com/p/3991c0dba094 pidstat 概述 pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备I ...

  3. 如何查看fullGC 次数

    如何查看fullGC 次数 如何较少fullGC 如何保证几周才发生一次fullGC

  4. TextEdit不能空验证设置

    在工具箱中找到dxValidationProvider控件拖拉到界面上,添加代码 ConditionValidationRule notEmptyValidationRule = new Condit ...

  5. qt5---布局

    QHBoxLayout  水平布局: Header:   #include <QHBoxLayout> qmake:  QT += widgets Inherits:QBoxLayout ...

  6. qt5-Qt Creator使用

    设置编码: 工具-->选项-->文本编辑器-->行为-->编辑器 中文编译失败的解决: 编辑-->--> 在头文件中增加:--解决乱码问题(文本所在的头文件) #i ...

  7. 解决 sublime输入一个字符后后面一个字符就会自动删除的问题

    A:在你的键盘上找到 insert 按键 当出现你所说情况的时候 就按一下这个按键因为insert按键 是控制覆盖原文输入功能的 因为你打字的时候不小心 碰到 才会出现你所说的情况.

  8. Springboot 默认静态路径

    springboot 默认静态路径 代码如下所示 类ResourceProperties.class private static final String[] CLASSPATH_RESOURCE_ ...

  9. 【清华集训2016】Alice和Bob又在玩游戏

    不难的题目.因为SG性质,所以只需要对一棵树求出. 然后如果发现从上往下DP不太行,所以从下往上DP. 考虑一个点对子树的合并,考虑下一个删的点在哪一个子树,那么剩下的状态实际上就是把一个子树所有能达 ...

  10. 广工2017校赛-F-- tmk找三角

    http://gdutcode.sinaapp.com/problem.php?cid=1056&pid=5 Description 有一棵树,树上有只tmk.他在这棵树上生活了很久,对他的构 ...