uni-app引用npm第三方库

更新:从HBuilderX版本0.1.51或以上开始,uni-app支持使用npm安装第三方包。使用方式参考NPM支持

以下为过期信息=================================================
HBuilderX版本0.1.50或以下版本参考以下文章使用。

uni-app 的目录结构,不是src、dist并列方式。
HBuilderX里的uni-app,根目录是相当于src,dist并放到了unpackage目录下。
src目录下是不能直接 npm install 引入第三方库的。
你可以在别处install,然后把相关文件copy到src下。

本文以 echarts 为例讲解 uni-app 如何引用 npm 第三方库。

1. 下载第三方库

\n

uni-app 使用了 mpvue 的部分代码,所以我们的 echarts 库使用兼用 mpvue 版本的 mpvue-echarts,同时需要引用百度的 echarts

下载流程如下:

  • 创建一个空的文件夹如:test-echarts。
  • 进入 test-echarts 打开命令行工具,执行 npm init 一路回车即可。
  • 下载第三方库:npm install echarts mpvue-echarts --save
  • 进入 node_modules 目录,里面的三个目录:echarts、mpvue-echats 、zrender 就是我们需要的第三方库。
\n

2. 创建uni-app工程

\n

在 HBuilderX 里面新建 uni-app,将将刚才下载的三个文件夹拷贝到项目根目录,最终项目截图如下:

3. 在uni-app里面使用第三方库

\n

和一般的 vue 项目引用第三方库的方法一样,如下所示,这样我们就能在工程里面使用 echarts 和 mpvue-echarts 了。

import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
\n

本示例源码在附件工程里面,下面是部分代码和效果截图:

<template>
<div class="container">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</div>
</template>

<script>
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

function initChart(canvas, width, height) {
......
}
export default {
data() {
return {
echarts,
onInit: initChart
}
},
components: {
mpvueEcharts
}
}
</script>

<style>
.container {
flex: 1;
}
</style>
\n


12 分享 关注
DCloud_客服_Trust 738506508@qq.com dhb 问问你 青伢子 水域心诚 523024777@qq.com sosoyz@gmail.com 这是个昵称 DCloud_MUI_Neil 大笨蛋 来了老弟
DCloud_MUI_Neil

DCloud_MUI_Neil 回复 na

下载支持legend的echarts的js包,目前使用的是简版echarts
0 赞 2019-01-12 14:02
na

na

请问怎么让这个项目显示legend呀 写在里面不显示,没有写错格式,里面的option放入echarts官网可以显示legend
0 赞 2019-01-11 22:18
liuweiky@qq.com

liuweiky@qq.com

编译报错
15:21:25.770 INFO Starting development server...
15:21:39.052 Module parse failed: Unexpected token (1:0)
15:21:39.053 You may need an appropriate loader to handle this file type.
15:21:39.056 > <template>
15:21:39.057 | <canvas
15:21:39.060 | v-if="canvasId"
0 赞 2018-12-28 15:26
553172870@qq.com

553172870@qq.com

微信开发工具能编译成功,真机调试报错BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".
0 赞 2018-11-13 19:27
553172870@qq.com

553172870@qq.com

BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".
0 赞 2018-11-13 18:21
工藤驼一

工藤驼一

echarts函数如何写在methods里面,否则调不了接口
0 赞 2018-11-06 19:39
jspeng

jspeng

请问这种方法引入的第三库很大,没法用在小程序上呢?
0 赞 2018-10-23 17:47
lawiet

lawiet

不想说什么,连官网提供的echarts代码都是有问题的,报了这个错误
An SelectorQuery call is ignored because no proper page or component is found. Please considering using `SelectorQuery.in` to specify a proper one.
0 赞 2018-10-22 09:12
DCloud_MUI_Neil

DCloud_MUI_Neil 回复 2394668226@qq.com

一直都不支持
0 赞 2018-10-17 12:03
2394668226@qq.com

2394668226@qq.com

资源引用失败:暂不支持引用本地资源'',可更换为网络地址或base64,现在是不支持这样引入了么????
0 赞 2018-10-16 23:13
chenytrl@163.com

chenytrl@163.com 回复 DCloud_MUI_Neil

以后会支持吗?如果不支持含有dom操作的插件的话 ,那几乎99%的vue插件都使用不了的,那这个框架它的意义何在?
1 赞 2018-10-16 15:24
DCloud_MUI_Neil

DCloud_MUI_Neil 回复 Chroisen

不支持 node相关插件和含有dom操作的插件
0 赞 2018-10-09 11:46
Chroisen

Chroisen 回复 DCloud_heavensoft

请问用了npm直接引入的,有一些插件需要用到Node内置的插件怎么办?比如var fs = require("fs")
会提示文件查找失败的。
0 赞 2018-10-02 16:26
DCloud_heavensoft

DCloud_heavensoft 回复 Chroisen

看ask公告
0 赞 2018-10-01 20:32
Chroisen

Chroisen 回复 DCloud_heavensoft

官方群是?
0 赞 2018-10-01 11:38
DCloud_heavensoft

DCloud_heavensoft 回复 chengzhuo5@qq.com

uniapp群里已放出新版本
0 赞 2018-09-30 19:16
chengzhuo5@qq.com

chengzhuo5@qq.com 回复 DCloud_MUI_Neil

要放假了,新版本出了吗
0 赞 2018-09-30 17:32
862840299@qq.com

862840299@qq.com

现在新版本出了吗?
0 赞 2018-09-28 09:10
DCloud_MUI_Neil

DCloud_MUI_Neil 回复 Chroisen

预计十一放假前
0 赞 2018-09-25 12:07
Chroisen

Chroisen 回复 DCloud_MUI_Neil

什么时候发布下一个版本?就等着有npm install这个后再开始用uni-app,相信很多人都是这样。
0 赞 2018-09-25 12:02
DCloud_MUI_Neil

DCloud_MUI_Neil 回复 dzcms@qq.com

下次发版支持那npm直接安装
0 赞 2018-09-25 10:38
dzcms@qq.com

dzcms@qq.com

这样不方便啊 node_modules里的文件成千上万
0 赞 2018-09-22 10:14
523024777@qq.com

523024777@qq.com

用HBuilderX编译这个工程出错了,新手不知道咋解决了。。。

编译提示信息如下:
16:44:03.660 模块编译失败:Error: Cannot find module 'deep-equal'
16:44:03.666 at Function.Module._resolveFilename (module.js:547:15)
16:44:03.670 at Function.Module._resolveFilename (D:\Tools\HBuilderX\plugins\uniapp\node_modules\module-alias\index.js:49:29)
16:44:03.674 at Function.Module._load (module.js:474:25)
16:44:03.679 at Module.require (module.js:596:17)
16:44:03.683 at require (internal/module.js:11:18)
16:44:03.689 at Object.<anonymous> (D:\Tools\HBuilderX\plugins\uniapp\lib\mpvue-loader\lib\mp-compiler\index.js:7:19)
16:44:03.697 at Module._compile (module.js:652:30)
16:44:03.698 at Object.Module._extensions..js (module.js:663:10)
16:44:03.703 at Module.load (module.js:565:32)
16:44:03.709 at tryModuleLoad (module.js:505:12)
16:44:03.714 at Function.Module._load (module.js:497:3)
16:44:03.720 at Module.require (module.js:596:17)
16:44:03.725 at require (internal/module.js:11:18)
16:44:03.730 at Object.<anonymous> (D:\Tools\HBuilderX\plugins\uniapp\lib\mpvue-loader\lib\loader.js:26:38)
16:44:03.736 at Module._compile (module.js:652:30)
16:44:03.737 at Object.Module._extensions..js (module.js:663:10)
16:44:13.712 已停止运行...
1 赞 2018-09-12 17:05
361801580@qq.com

361801580@qq.com

什么时候支持直接npm install呢?如果我要使用socket.io-client ,需要引入哪些文件?
2 赞 2018-08-06 16:32
738506508@qq.com

738506508@qq.com

昨天说写教程今天就发出来了,效率点赞
0 赞 2018-08-02 13:49

要回复文章请先登录注册