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的正确打开方式的更多相关文章

  1. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  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.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  4. vue按需引入element或mint

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

  5. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  6. Pull Request的正确打开方式(如何在GitHub上贡献开源项目)

    Pull Request的正确打开方式(如何在GitHub上贡献开源项目) GitHub的官方帮助如下: Fork A Repo: https://help.github.com/articles/f ...

  7. 【分享】WeX5的正确打开方式(6)——数据组件初探

    本文是[WeX5的正确打开方式]系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式. 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON ...

  8. iOS开发小技巧--相机相册的正确打开方式

    iOS相机相册的正确打开方式- UIImagePickerController 通过指定sourceType来实现打开相册还是相机 UIImagePickerControllerSourceTypeP ...

  9. Xcode 的正确打开方式——Debugging(转载)

    Xcode 的正确打开方式——Debugging   程序员日常开发中有大量时间都会花费在 debug 上,从事 iOS 开发不可避免地需要使用 Xcode.这篇博客就主要介绍了 Xcode 中几种能 ...

随机推荐

  1. 【hackerrank】Week of Code 30

    Candy Replenishing Robot Find the Minimum Number 直接模拟 Melodious password dfs输出方案 Poles 题意:有多个仓库,只能从后 ...

  2. BZOJ1566:[NOI2009]管道取珠——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1566 https://www.luogu.org/problemnew/show/P1758 题目 ...

  3. Vue报错

    Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found ...

  4. 【BZOJ4889】[Tjoi2017]不勤劳的图书管理员 分块+树状数组

    [BZOJ4889][Tjoi2017]不勤劳的图书管理员 题目描述 加里敦大学有个帝国图书馆,小豆是图书馆阅览室的一个书籍管理员.他的任务是把书排成有序的,所以无序的书让他产生厌烦,两本乱序的书会让 ...

  5. [zhuan]VMware中bridge方式网络不能上网的解决办法

    http://jingpin.jikexueyuan.com/article/31601.html 安装好VMware 7后,打开原来的虚拟机文件,发现不能上网,原来的Ethernet是设置的Brid ...

  6. 【套题】qbxt国庆刷题班D2

    D2 今天的题感觉还是好妙的 T1 传送门 Description 现在有一张\(n\)个节点\(m\)条边的无向连通图\(G=(V,E)\),满足这张图中不存在长度大于等于3的环且图中没有重边和自环 ...

  7. Eclipse的Project Facets属性设置解决项目无故报错

    新检出项目,发现代码无故报错,各种尝试,最终发现是因为  项目右键中的 project Facets 属性中的 java 后面的 version 版本和项目 build path 的 jdk 版本不一 ...

  8. linux环境下,接着lnmp,安装redis

    linux环境下,安装redis   操作记录: 回到家目录 cd ~查看   ls进入   lump cd lnmp1.3-fullls??? sudo  ./addons.sh //---进入后选 ...

  9. Rsync+inotify自动同步数据

    一.简介 随着应用系统规模的不断扩大,对数据的安全性和可靠性也提出的更好的要求,rsync在高端业务系统中也逐渐暴露出了很多不足. 首先,rsync在同步数据时,需要扫描所有文件后进行比对,进行差量传 ...

  10. X210串口配置与stdio移植

    串口控制器初始化关键步骤 (1)初始化串口的Tx和Rx引脚所对应的GPIO(查原理图可知Rx和Rx分别对应GPA0_1和GPA0_0) (2)GPA0CON(0xE0200000),bit[3:0] ...