vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到。
首先我们先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的方法的更多相关文章
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- vue按需引入第三方ui插件优化
components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...
- vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置
Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
随机推荐
- cmd命令行显示中文乱码
cmd命令行显示中文乱码多数是由于字符编码不匹配导致. 1.查看cmd编码方式 方法一.打开cmd,输入chcp命令回车(显示默认编码:活动代码页:936指GBK) 方法二.打开cmd在标题栏单击鼠标 ...
- printf计算参数是从右到左压栈的(a++和++a的压栈的区别)
一.问题 c++代码: #include <iostream> #include <stdio.h> using namespace std; int main(){ ; co ...
- 百度AI训练营笔记
参加了两天百度AI训练营,简单记录一下学到的东西 一.知识图谱 知识图谱是让机器具有积累知识.运用知识的本领. 由于目前知识量很大,所以人工标注的方法无法满足,可以采用数据驱动.自底向上的方式自动构建 ...
- vue自定义指令,自动调用下载的方法
directives: { clickDown: { inserted (el, binding, item) { if (+binding.value.item.fromId === +item.c ...
- js面试之--判断一个对象是不是数组类型,一共几种方法???
- 清除eclipse 里面主函数的加载记录 launch configuration删除
我们eclipse 里面执行的程序,应用 把他记录下来,生成配置文件. 当我们导出行的jar包的时候,需要制定运行的主函数. 会看到很多的历史主程序,带来方便的同时,也产生了影响. 需要清除写记录的 ...
- 3.决策树ID3算法原理
1.决策树的作用 主要用于解决分类问题的一种算法 2.建立决策树的3中常用算法 1).ID3--->信息增益 2).c4.5--> 信息增益率 4).CART Gini系数 3.提出问题: ...
- Python3学习笔记(十二):闭包
闭包定义: 在一个外函数中定义了一个内函数,内函数里引用了外函数的临时变量,并且外函数的返回值是内函数的引用.这样就构成了一个闭包. 我们先来看一个简单的函数: def outer(a): b = 1 ...
- hexo的流程
1.基于node 的npm包管理工具2.npm install -g hexo(hexo-cli)3.下载的资源是国外的可能比较慢,可以使用淘宝镜像(代理的仓库)npm install -g hexo ...
- MongoDB4和MysSQL5.7的读/写和事务处理速度简单对比
系统环境: Ubuntu 18.04 数据库 MysSQL5.7/MongoDB4.0 插入的数据为随机生产,不重复. MySQL使用的连接库是 sqlalchemyMongoDB使用的连接库是pym ...