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

2020-08-12 16:36:31 +08:00
 black11black

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

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

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

比如这样

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

打包会提取为新的 js,进入页面时才会引入
xiaoxinshiwo
2020-08-12 20:24:08 +08:00
看官方文档啊
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
2020-08-12 22:36:05 +08:00
组件懒加载或者包含这个组件的路由懒加载就行了
Biwood
2020-08-12 22:44:47 +08:00
楼上说的比较清楚了，这是 webpack lazy loading 相关的知识，直接看 webpack 官方文档即可 https://webpack.docschina.org/guides/lazy-loading/
mxT52CRuqR6o5
2020-08-12 23:46:08 +08:00
建议用 js 标准提供的能力去实现需求，就像 1l 那样写就行

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/697718

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX