使用引入echarts、vant等插件

CDN官网：可以查看所有插件https://www.bootcdn.cn/

cdn引入echarts

1、在public - index.html中

<!-- 引入 echarts的 JS 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.common.js"></script>

2、在vue.config.js中 externals中加 echarts: 'echarts'

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
    config.externals({
      vant: 'vant',
      echarts: 'echarts'
    })
  },
  lintOnSave: true // 打开 eslint 检查
}

3、在要使用的vue文件中

import echarts from 'echarts'

cdn引入vant 、element等

引入vant
1、index.html中

这里要注意2点；1、vant低版本的没有van-calender 2、必须先引入vue再引入vant

<!-- 引入vant样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>

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

2、在vue.config.js中 externals中加 vant: 'vant'，同上
3、在main.js中引入vant

import vant from 'vant'
Vue.use(vant)