element-ui 按需引入， cdn引入，全部引入

标题element-ui 按需引入， cdn引入，全部引入

1.按需引入

首先，需要安装element-ui， npm install element-ui --save
然后，在main.js文件中按需引入

import Vue from 'vue'
import {
     
    Button,
    Message,
    Form,
    FormItem
} from 'element-ui';

//由于Message组件并没有install方法供Vue来操作的，是直接返回的，因此按照官方文档单独引入的方法会报错的，需要给 Message 添加 install 方法
Message.install = function (Vue) {
     
    Vue.prototype.$message = Message
}

Vue.use(Button)   
Vue.use(Message)
Vue.use(Form)
Vue.use(FormItem)

2. cdn引入

• 首先，我是用的vue cli3.0脚手架，需要在public文件夹下的index.html文件中添加cdn链接，element-ui是cdn引入，vue也必须是cdn引入，而且vue的引入必须在element-ui之前，因为element-ui是基于vue书写的。
  （element-ui是cdn引入，vue是npm安装，这样会报错的）

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script> 
<!-- <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> -->

• 然后， 在vue.config.js文件中配置一些属性，为了项目文件可以识别cdn引入的vue和element-ui。
  （不需要再在main.js中引入vue和elemet-ui）
  （有一个不好，那就是不能修改主题颜色，我本人比较菜，没找到解决办法）

module.exports = {
     
  configureWebpack: {
     
     externals: {
     
       'vue': 'Vue',
        'element-ui': 'ELEMENT',
     //   'vue-router': 'VueRouter',
     //   'vuex': 'Vuex',
     //   'axios': 'axios'
      
     }
   }
}

3. 全部引入

• 首先， 安装element-ui， npm install element-ui --save
• 然后，在main.js文件中引入

import Vue from 'vue'
import ElementUI from 'element-ui'
// 主题颜色修改文件
import "./style/element-variables.scss"
Vue.use(ElementUI)

主题颜色修改，并存放到本地项目的style文件夹下的element-variables.scss

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

最后，对比了全部引用和cdn引用这2种方式打包之后的dist大小，二者打出的dist大小相差差不多4M