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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

这是一个创建于 1570 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，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

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 via Android

建议用 js 标准提供的能力去实现需求，就像 1l 那样写就行