Neil_HL
Neil_HL
  • 发布:2018-08-02 13:29
  • 更新:2024-02-03 15:09
  • 阅读:122309

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>

18 关注 分享
Trust 7***@qq.com dhb 问问你 青伢子 水域心诚 5***@qq.com s***@gmail.com 这是个昵称 Neil_HL 大笨蛋 来了老弟 4***@qq.com 9***@qq.com p***@163.com 1***@163.com Jasmine001 DCloud_UNI_HRK

要回复文章请先登录注册

2***@qq.com

2***@qq.com

你们在这里放个dome用又不能用。来干嘛来了
2024-02-03 15:09
2***@qq.com

2***@qq.com

回复 1***@qq.com :
这个domo是不是少东西啊。郁闷
2024-02-03 15:05
DCloud_UNI_HRK

DCloud_UNI_HRK

回复 奔跑爆米花 :
你要使用npm相关的东西就需要
2023-12-28 20:00
奔跑爆米花

奔跑爆米花

uniapp 依赖 node环境吗
2023-12-28 14:36
z***@163.com

z***@163.com

回复 吴克 :
不要研究了,nvue就不支持
2023-04-25 16:42
1***@163.com

1***@163.com

我npm安装第三方插件库,为啥真机运行调试报错,说找不到插件
2022-06-08 14:29
1***@qq.com

1***@qq.com

你这能算是用npm么?
2022-04-20 16:33
提问题的人

提问题的人

回复 wangOfPeng :
有解决吗
2022-02-22 15:26
吴克

吴克

emm,按我的理解,只要第三方是vue库就应该是兼容的。
现在正在找方法实现非vue库(不是纯js库)的实现方法。思路是v-html嵌入库中html的部分,不知道行不行
2022-02-11 14:27
1***@qq.com

1***@qq.com

回复 DaisyXWLA :
我也发现demo不显示
2021-01-11 14:50