1、html 中引入 echarts

        html中添加script标签如下:
        <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script>
2、在 webpack 中配置使用 echarts CDN
 
   在vue.config.js中配置如下:
   module.exports = {
    configureWebpack: {
      externals: {
        'echarts': 'echarts' // 配置使用CDN
      }
    }
   }
  externals中的key是用于import,value表示的在全局中访问到该对象,就是window.echarts
3、在vue文件中使用
   在vue中使用echarts的时候无需 import echarts,可直接使用

vue-cli3项目中使用CDN的更多相关文章

  1. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

  2. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  3. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  4. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  5. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  6. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  7. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  8. Vue 实际项目中你可能会遇见问题

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  9. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  10. 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

随机推荐

  1. HDU1003 最大连续子序列

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. Java基础——值传递

    值传递? 参数传递的值的拷贝,改变拷贝不影响原参数. 引用传递? 参数传递的是参数本身,改变形参,实参也改变. Java中是什么传递? Java中只有值传递 实际情况为什么不对呢? 1. 基本数据类型 ...

  3. std::replace函数

    需包含头文件#include <algorithm> template <class ForwardIterator, class T> void replace (Forwa ...

  4. 三角箭头 css实现

    效果图: 1.html 代码 <div>较昨日 <span class="dot-up"></span> 20%</div> < ...

  5. 快速Get-JAVA-IO流

    第四阶段 IO IO流 前言: 前面的学习我们只能够在已有的一定封闭范围内进行一些操作,但是这显然是无趣的,也是不支持我们实现一些复杂的需求,所以Java提供IO流这样一种概念,方便我们对数据进行操作 ...

  6. java知识随笔整理-数据库的临时表

    1.创建临时表的方法 方法一.select * into #临时表名 from 你的表; 方法二. create table #临时表名(字段1 约束条件,字段2 约束条件,.....)create ...

  7. 【青橙商城-管理后台开发】3. web模块搭建

    [青橙商城-管理后台开发]3. web模块搭建 1.创建qingcheng_web_manager模块 pom.xml <?xml version="1.0" encodin ...

  8. 盒模型中padding、border、margin的区别

    在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...

  9. Ural 1250 Sea Burial 题解

    目录 Ural 1250 Sea Burial 题解 题意 输入 题解 程序 Ural 1250 Sea Burial 题解 题意 给定一个\(n\times m\)的地图,\(.\)为水,\(\#\ ...

  10. ASP.NET跨平台、分布式技术架构技术栈概览 (迄今为止最全的.NET技术栈)

    今天有个学技术的小兄弟问我,现在这么多的技术我要学哪个?我说你根据岗位来学,学好了哪一门都可以在社会上立足,如今已经早已不是我们当年学习IT时候那么单纯了,给他讲了很多,发现现在的技术栈变得层次复杂且 ...