element-ui使用cdn引入，按需引入

1.按需引入

首先，需要安装element-ui

// 按需引入所需插件
npm install babel-plugin-component -D
npm install element-ui --save

然后plugins/elementUi.js中

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

const element = {
    install: function(Vue) {
        Vue.use(Button)
    }
}
Vue.prototype.$message = Message
export default element

然后，在main.js文件中引入

import 'element-ui/lib/theme-chalk/index.css'
import element from '@/plugins/elementUi.js'
Vue.use(element)

babel.config.js

module.exports = {
  // presets: [
  //   '@vue/cli-plugin-babel/preset'
  // ],
  // plugins: [
  //   [
  //     "component",
  //     {
  //       "libraryName": "element-ui",
  //       "styleLibraryName": "theme-chalk"
  //     }
  //   ]
  // ]
}

vue.config.js

//暂不需要
module.exports = {
    css:{
        loaderOptions:{
            less:{
                javascriptEnabled:true//less-loader配置里开启允许javascript
            }
        }
    }
}

CDN引入

1.在public文件夹中的index.html文件引入vue，element-ui，element-uicss样式文件。

<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
 //然后是引入js文件  因为elemnt-ui 是基于vue书写的
//所以这里注意了 一定要先引入vue文件     顺序不要乱
//unpkg.com要使用国内的镜像unpkg.zhimg.com才不会卡
//Vue一定要在headz中引入
//<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- 支持vue的elenemtUI封装js CDN -->
//<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.zhimg.com/element-ui@2.15.7/lib/index.js"></script>

2.在vue.config.js文件夹中配置externals

module.exports = {
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'element-ui': 'ELEMENT'// cdn 版本的 element-ui 设置的全局变量是 ELEMENT
            //'element-ui': 'ElementUI'
        }
    }
}

3.去掉组件的import

//import Vue from 'vue'
//import ElementUI from 'element-ui'
//import 'element-ui/lib/theme-chalk/index.css'
//Vue.use(ElementUI)
//使用message组件和$confirm
//import { MessageBox, Message } from 'element-ui'
//Vue.prototype.$confirm = MessageBox.confirm
//Vue.prototype.$message = Message