Neil_HL
Neil_HL
  • 发布:2018-08-02 13:29
  • 更新:2019-07-24 16:05
  • 阅读:29857

uni-app引用npm第三方库

分类:uni-app

更新:从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. 下载第三方库

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 就是我们需要的第三方库。

2. 创建uni-app工程

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

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

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

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

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

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

15 关注 分享
Trust 738506508@qq.com dhb 问问你 青伢子 水域心诚 523024777@qq.com sosoyz@gmail.com 这是个昵称 Neil_HL 大笨蛋 来了老弟 465180253@qq.com 975794403@qq.com p_designer@163.com

要回复文章请先登录注册

小燕子

小燕子

回复 18659111486@163.com:
我也是这个出现这个问题了,请问你解决了吗
2019-07-24 16:05
18659111486@163.com

18659111486@163.com

回复 17796652153@163.com:
this.echarts.setCanvasCreator is not a function
2019-07-24 14:36
18659111486@163.com

18659111486@163.com

回复 17796652153@163.com:
你好,请问你遇到的这个的问题解决了吗
2019-07-24 14:35
1035576231@qq.com

1035576231@qq.com

如果我要引用mintui这个插件呢??怎么引用?
2019-07-13 10:59
812090116@qq.com

812090116@qq.com

你好我尝试使用了这个DEMO,但是无论在chrome还是手机上都没有显示图表
2019-07-01 17:56
sarr

sarr

你好我尝试使用了这个DEMO,但是无论在chrome还是手机上都没有显示图表
2019-06-09 12:31
17796652153@163.com

17796652153@163.com

我尝试使用了 这个下载的demo可以在微信运行 但是我把里面的 那三个文件包 复制到自己项目里边 然后又把该页面复制进来 打开进去 TypeError: this.echarts.setCanvasCreator is not a function
2019-05-31 17:37
finallyfeel@gmail.com

finallyfeel@gmail.com

要是一个第三方库需要依赖多个库,岂不是得把所有需要依赖的库都复制到项目根目录?
2019-05-22 18:37
15622090595@163.com

15622090595@163.com

回复 panyh:
解决了吗
2019-05-05 14:07
15622090595@163.com

15622090595@163.com

回复 804363343@qq.com:
解决了吗
2019-05-05 14:07
ning_web@163.com

ning_web@163.com

我import * as echarts “echarts” 只引入了object 引入不了function 你们有遇到过嘛。导致所有echarts funrtion 都是undefined
2019-04-18 19:17
masx200

masx200

这个uni-app能不能完整支持nodejs的内置功能啊?
2019-04-13 21:58
994545819@qq.com

994545819@qq.com

回复 老司机开个车:
看到了 已改 谢谢
2019-04-12 18:27
老司机开个车

老司机开个车

回复 994545819@qq.com:
看我的问题里面,有人回答了
2019-04-12 16:37
994545819@qq.com

994545819@qq.com

回复 老司机开个车:
我也遇到这个问题了 你解决了吗?
2019-04-12 16:12
老司机开个车

老司机开个车

把js文件换成别的之后,就报t.addEventListener is not a function,是什么问题,我直接npm echarts,也是报这个错
2019-04-11 09:47
panyh

panyh

下载了demo,然后canvas空白?
2019-03-28 18:01
沐小馨

沐小馨

回复 Neil_HL:
你好,我想请问一下,项目之前引入的echarts是简易版的,不显示lenged,也没有树形图,我重新下载了echarts,引入echarts.min.js,可是图形不现实了是怎么回事?
2019-03-25 11:38
沐小馨

沐小馨

回复 na:
你解决了吗
2019-03-20 16:32
沐小馨

沐小馨

在项目中npm下载的echarts是简易版的
2019-03-20 16:32
沐小馨

沐小馨

npm怎么下载带有legend的echarts
2019-03-20 16:31
804363343@qq.com

804363343@qq.com

按照教程这样引入后毫无效果也不报错。个人觉得有点失望。
2019-03-16 13:37
1653173763@qq.com

1653173763@qq.com

你不觉得直接拷贝过去的echarts文件过大吗?都快有4-5兆了,小程序无法预览,然后我去删除其他,只留下echarts.min.js文件,之后报错,没辙了
2019-03-09 11:13
Neil_HL

Neil_HL (作者)

回复 1577653650@qq.com:
最新的uni-app已经支持npm机制
2019-02-21 19:52
1577653650@qq.com

1577653650@qq.com

可以借鉴下vue-cli的npm包管理机制
2019-02-21 18:01
Neil_HL

Neil_HL (作者)

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

na

请问怎么让这个项目显示legend呀 写在里面不显示,没有写错格式,里面的option放入echarts官网可以显示legend
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"
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".
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".
2018-11-13 18:21
工藤驼一

工藤驼一

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

jspeng

请问这种方法引入的第三库很大,没法用在小程序上呢?
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.
2018-10-22 09:12
Neil_HL

Neil_HL (作者)

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

2394668226@qq.com

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

chenytrl@163.com

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

Neil_HL (作者)

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

Chroisen

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

DCloud_heavensoft

回复 Chroisen:
看ask公告
2018-10-01 20:32
Chroisen

Chroisen

回复 DCloud_heavensoft:
官方群是?
2018-10-01 11:38
DCloud_heavensoft

DCloud_heavensoft

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

chengzhuo5@qq.com

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

862840299@qq.com

现在新版本出了吗?
2018-09-28 09:10
Neil_HL

Neil_HL (作者)

回复 Chroisen:
预计十一放假前
2018-09-25 12:07
Chroisen

Chroisen

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

Neil_HL (作者)

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

dzcms@qq.com

这样不方便啊 node_modules里的文件成千上万
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 已停止运行...
2018-09-12 17:05
361801580@qq.com

361801580@qq.com

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

738506508@qq.com

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