vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart
1、完整引入,直接了当,但是组件文件不是按需加载,造成多余,不够优雅
在 main.js 中写入以下内容:
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(Element); new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。
2、按需引入,需要配置babel文件 .babelrc
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component --save-dev
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
此时,vue-cli项目中.babelrc文件长这样子
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
接下来就要配置了,先来了解下各配置项用途
{
// 此项指明,转码的规则
"presets": [
["es2015", {"modules": false }], //需要npm install babel-preset-es2015 --save-dev
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
// compiles ES2015+ down to ES5 具体见babel-preset-env官网:https://www.npmjs.com/package/babel-preset-env
["env", { "modules": false }], // 下面这个是不同阶段出现的es语法,包含不同的转码插件//可参考babel官网
"stage-2"
],
"plugins": [//// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"transform-runtime",
//需要npm install babel-plugin-component -D//官网:http://element-cn.eleme.io/#/zh-CN/component/quickstart
["component", [{
"libraryName": "element-ui", //按需引用element-ui插件
//"styleLibraryName": "theme-default" //按需引用element-ui主题
}]]
],// 下面指的是在生成的文件中,不产生注释
"comments": false,// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],// instanbul是一个用来测试转码后代码的工具
"plugins": [ "istanbul" ]
}
}
}
OK,到这步已经配完了?
但是你会发现在npm install babel-preset-es2015 时,你会发现有如下的 Deprecated警告:
deprecate babel-preset-es2015@* ???? Thanks for using Babel: we recommend using
babel-preset-env now: please read babeljs.io/env to update!
√ All packages installed (1 packages installed from npm registry, used 44s, spe
ed 1.84kB/s, json 25(80.05kB), tarball 0B)
原因是Babel 的官网上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃(deprecated),取而代之的是 babel-preset-env,并且承诺它将成为“未来不会过时的(future-proof)”解决方案。
在过去,Babel 将 babel-preset-es2015 放在 babel/babel 的主仓库中进行维护,而 babel-preset-env 则独立为一级项目,这从某种程度上也显示出 Babel 官方对这款 preset 的重视程度和更长远的规划。
如何迁移
首先卸载原来的 preset,然后安装 babel-preset-env:
npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env@next
接下来将你的 .babelrc 文件中“es2015”修改“env”:
{
"presets": [ "env" ],
...
}
好了,恭喜你,就这么简单,你已经可以与 ES2015+ 保持更新了!
vue-cli脚手架环境中,已经采用了最新的babel-preset-env,所以可以忽略 "presets": [["es2015", { "modules": false }]] es2015 这项
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
// ["es2015", { "modules": false }], //需要先cnpm install babel-preset-es2015 --save-dev ,下载es5的babel转码插件,些处是多余,已配置env
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来,就可以欢快的实现按需加载啦
如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue'; Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/ new Vue({
el: '#app',
render: h => h(App)
});
全局配置
在引入 Element 时,可以传入一个全局配置对象。该对象目前仅支持 size
字段,用于改变组件的默认尺寸。按照引入 Element 的方式,具体操作如下:
完整引入 Element:
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small' });
按需引入 Element:
import Vue from 'vue';
import { Button } from 'element-ui'; Vue.prototype.$ELEMENT = { size: 'small' };
Vue.use(Button);
按照以上设置,项目中所有拥有 size
属性的组件的默认尺寸均为 'small'。
vue-cli脚手架引入element UI的正确打开方式的更多相关文章
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- Pull Request的正确打开方式(如何在GitHub上贡献开源项目)
Pull Request的正确打开方式(如何在GitHub上贡献开源项目) GitHub的官方帮助如下: Fork A Repo: https://help.github.com/articles/f ...
- 【分享】WeX5的正确打开方式(6)——数据组件初探
本文是[WeX5的正确打开方式]系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式. 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON ...
- iOS开发小技巧--相机相册的正确打开方式
iOS相机相册的正确打开方式- UIImagePickerController 通过指定sourceType来实现打开相册还是相机 UIImagePickerControllerSourceTypeP ...
- Xcode 的正确打开方式——Debugging(转载)
Xcode 的正确打开方式——Debugging 程序员日常开发中有大量时间都会花费在 debug 上,从事 iOS 开发不可避免地需要使用 Xcode.这篇博客就主要介绍了 Xcode 中几种能 ...
随机推荐
- 【hackerrank】Week of Code 30
Candy Replenishing Robot Find the Minimum Number 直接模拟 Melodious password dfs输出方案 Poles 题意:有多个仓库,只能从后 ...
- BZOJ1566:[NOI2009]管道取珠——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=1566 https://www.luogu.org/problemnew/show/P1758 题目 ...
- Vue报错
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found ...
- 【BZOJ4889】[Tjoi2017]不勤劳的图书管理员 分块+树状数组
[BZOJ4889][Tjoi2017]不勤劳的图书管理员 题目描述 加里敦大学有个帝国图书馆,小豆是图书馆阅览室的一个书籍管理员.他的任务是把书排成有序的,所以无序的书让他产生厌烦,两本乱序的书会让 ...
- [zhuan]VMware中bridge方式网络不能上网的解决办法
http://jingpin.jikexueyuan.com/article/31601.html 安装好VMware 7后,打开原来的虚拟机文件,发现不能上网,原来的Ethernet是设置的Brid ...
- 【套题】qbxt国庆刷题班D2
D2 今天的题感觉还是好妙的 T1 传送门 Description 现在有一张\(n\)个节点\(m\)条边的无向连通图\(G=(V,E)\),满足这张图中不存在长度大于等于3的环且图中没有重边和自环 ...
- Eclipse的Project Facets属性设置解决项目无故报错
新检出项目,发现代码无故报错,各种尝试,最终发现是因为 项目右键中的 project Facets 属性中的 java 后面的 version 版本和项目 build path 的 jdk 版本不一 ...
- linux环境下,接着lnmp,安装redis
linux环境下,安装redis 操作记录: 回到家目录 cd ~查看 ls进入 lump cd lnmp1.3-fullls??? sudo ./addons.sh //---进入后选 ...
- Rsync+inotify自动同步数据
一.简介 随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐渐暴露出了很多不足. 首先,rsync在同步数据时,需要扫描所有文件后进行比对,进行差量传 ...
- X210串口配置与stdio移植
串口控制器初始化关键步骤 (1)初始化串口的Tx和Rx引脚所对应的GPIO(查原理图可知Rx和Rx分别对应GPA0_1和GPA0_0) (2)GPA0CON(0xE0200000),bit[3:0] ...