【Vue】ElementUI、ECharts使用 cdn引入

【Vue】ElementUI、ECharts使用 cdn引入

参考： https://juejin.cn/post/6898907771362607118

1、修改 public/index.html：

head里：

  <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 

body里：

     <!-- 引入组件库 vue放第一个-->
      <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="https://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>

 

2、vue.config.js

    configureWebpack:{ 
        externals: {
            // // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
            'vue': 'Vue',
            'echarts': 'echarts',
            // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
            // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
            'element-ui': 'ELEMENT'
        },

3、main.js

import ElementUI from 'element-ui'
Vue.use(ElementUI);

4、使用

el-button等直接用

ECharts:

组件里

import * as echarts from 'echarts'

let myChart =  echarts.init(document.getElementById("myChart"));