Neil_HL
Neil_HL
  • 发布:2018-08-02 13:29
  • 更新:2020-06-29 09:29
  • 阅读:53415

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

要回复文章请先登录注册

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
lanael@live.com

lanael@live.com

mark
2020-03-12 16:31
babalalw@gmail.com

babalalw@gmail.com

回复 994516762@qq.com :
可以参照这篇官方文档
https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81
2020-02-19 22:27
994516762@qq.com

994516762@qq.com

回复 1035576231@qq.com :
您好,你解决这个问题了?
2020-01-09 16:16
994516762@qq.com

994516762@qq.com

这算哪门子的支持 npm安装依赖 ,就不能直接 npm install 嘛?
2020-01-09 16:16
649955454@qq.com

649955454@qq.com

麻烦问一下,必须得用mpvue-echarts,不能用ec-canvas这个原生插件么
2019-12-30 19:37
1050506250@qq.com

1050506250@qq.com

好多坑啊,都想弃坑了
2019-11-29 10:31