V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
black11black
V2EX  ›  JavaScript

vue 如何在单个组件中引入外部包,比如 echarts 或者 jquery?

  •  
  •   black11black · 2020-08-12 16:36:31 +08:00 · 2444 次点击
    这是一个创建于 1324 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,vue-cli4 构建的项目,现有一需求是某组件需要画图表

    想要实现的效果是,在这个只有加载这个组件时才会引入 echarts,而不是绑定到 vue 全局,不会导致打包出来程序过大。应该怎么实现呢?

    一个简单想法是,直接在.vue 文件的<html>部分里输入 echarts.min.js 的地址,是否可行?

    比如这样

    <link href=echarts.min.js rel=preload as=script>
    
    7 条回复    2020-08-12 23:46:08 +08:00
    murmur
        1
    murmur  
       2020-08-12 16:38:01 +08:00
    ehcarts 有模块封装和按需引用,webpack2 以上,vue2 以上开 dynamic import 都可以按需引入和懒加载
    redbuck
        2
    redbuck  
       2020-08-12 17:10:54 +08:00
    import('echats')
    .then(echats => {
    })
    .catch(console.log)

    打包会提取为新的 js,进入页面时才会引入
    xiaoxinshiwo
        3
    xiaoxinshiwo  
       2020-08-12 20:24:08 +08:00
    看官方文档啊
    jorneyr
        4
    jorneyr  
       2020-08-12 21:18:12 +08:00
    可以参考这个实现: https://qtdebug.gitee.io/html/vue-in-action/#/%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD-JS-CSS

    // 懒加载 TinyMCE
    Utils.loadJs('/static-p/lib/tinymce/tinymce.min.js').then(() => {
    this.initEditor();
    });
    ryougifujino
        5
    ryougifujino  
       2020-08-12 22:36:05 +08:00
    组件懒加载或者包含这个组件的路由懒加载就行了
    Biwood
        6
    Biwood  
       2020-08-12 22:44:47 +08:00
    楼上说的比较清楚了,这是 webpack lazy loading 相关的知识,直接看 webpack 官方文档即可 https://webpack.docschina.org/guides/lazy-loading/
    mxT52CRuqR6o5
        7
    mxT52CRuqR6o5  
       2020-08-12 23:46:08 +08:00 via Android
    建议用 js 标准提供的能力去实现需求,就像 1l 那样写就行
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5623 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:06 · PVG 14:06 · LAX 23:06 · JFK 02:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.