Neil_HL
Neil_HL
  • 发布:2018-08-02 13:29
  • 更新:2021-01-11 14:50
  • 阅读:74865

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>

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

要回复文章请先登录注册

1728733706@qq.com

1728733706@qq.com

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

季陆

回复 wangOfPeng :
我也遇到了,我的一个npm包用的是core-js2(并且写在dependence中),编译时报找不到此包,发现根本没有找此包下的node_modules
2021-01-07 10:59
林间有风1

林间有风1

阿里云双12大促进行中【阿里云免费送1核2G5M服务器,需要购买联系我】
1核2G内存5M带宽:57/半年
2核4G内存1M带宽:847元/3年
2核4G内存3M带宽:1107元/3年
2核8G内存3M带宽:1431元/3年
4核8G内存3M带宽:2691元/3年
8核16G内存5M带宽:7353/3年
双12主会场:https://www.aliyun.com/minisite/goods?taskCode=pintuan20201212&recordId=293114&userCode=wbqjs7bw

腾讯云秒杀活动进行中
1核2G1M50G盘,99元/1年,298元/3年
2核4G3M150G盘,586元/1年
2核4G5M(企业用户专区,限购3台):1821元/3年
2核8G5M(企业用户专区,限购3台):2205元/3年
4核8G5M(企业用户专区,限购3台):3242元/3年
腾讯云活动地址:
https://curl.qcloud.com/7uwmNRdR
联系QQ:454160064
2020-12-22 12:00
43430404@qq.com

43430404@qq.com

你这个没发现实例释放不了内存吗,多次进出内存吃得不厉害吗
2020-12-22 11:50
DaisyXWLA

DaisyXWLA

运行了demo为什么不显示
2020-11-20 14:49
379811447@qq.com

379811447@qq.com

支持了nmp也是luan的,对node和dom操作不支持,99%下载的插件和库直接报废,那我用npm下载插件和库的意义在哪里?这个设计也是没有谁了···
2020-10-21 09:25
316665385@qq.com

316665385@qq.com

回复 LiYaoHui :
请问引入第三方插件过多,导致vendor.js过大,如何处理?
2020-06-29 09:29
wangOfPeng

wangOfPeng

npm好像不支持,引入时文件查找失败
2020-06-12 14:04
Mob_Developer

Mob_Developer

这个太水了~
2020-06-01 17:23
LiYaoHui

LiYaoHui

通过这种方式引入第三方库后,编译出来的vendor.js过大,导致无法在小程序端预览
2020-05-22 15:44