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 中几种能 ...
随机推荐
- BZOJ4563:[HAOI2016]放棋子——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4563 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列 ...
- 欢迎大家收听喜马拉雅,我的主播频道http://m.ximalaya.com/weizhubo/44966139
关注光荣之路软件技术培训账号,即时收取测试开发技术的免费公开课信息,各大公司测试及开发招聘信息.最新的技术咨询.线下测试 喜马拉雅微电台,每天早晨光荣之路创始人吴老,都会跟大家一起分享测试行业心得体会 ...
- noip模拟赛 大芳的逆行板载
题目背景 大芳有一个不太好的习惯:在车里养青蛙.青蛙在一个n厘米(11n毫米s)的Van♂杆子上跳来跳去.她时常盯着青蛙看,以至于突然逆行不得不开始躲交叉弹.有一天他突发奇想,在杆子上每1厘米为一个单 ...
- stout代码分析之十一:hashmap和multihashmap
hashmap是std::unordered_map的子类,前者对后者的接口做了进一步封装. hashmap的移动构造函数: hashmap(std::map<Key, Value>&am ...
- 动态切换input的 disables 属性
$("input[type='text']").each(function(){ if($(this).data('parent_id')){ var _each_this_par ...
- jsp链接sql数据库
Connection 参数//这个参数用来执行链接数据库的操作 String 参数2="com.microsoft.sqlserver.jdbc.SQLServerDriver"; ...
- 地精排序Gnome Sort
号称最简单的排序算法,只有一层循环,默认情况下前进冒泡,一旦遇到冒泡的情况发生就往回冒,直到把这个数字放好为止 直接看它排序的过程,待排数组[6 2 4 1 5 9] 先设计一个标识i=0然后从头开始 ...
- elk相关
curl http://localhost:9200/_aliases?pretty=1 #列出elk中所有索引
- mysql 并发下数据不一致的问题分析及解决
MySQL 5.6 , InnoDB存储引擎,默认事务隔离级别(REPEATABLE-READ) 初始sql 脚本如下: CREATE DEFINER=`root`@`localhost` PROCE ...
- JS中的实例方法与静态方法
一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么 静态方法: function A(){} A.sayMeS=function(){ console.lo ...