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. 下载第三方库
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>
- echarts.zip
引用:http://ask.dcloud.net.cn/article/19727
http://ask.dcloud.net.cn/article/34945
uni-app引用npm第三方库相关推荐
- uniapp引用npm第三方库
uniapp引入npm第三方库教程 关于uniapp的初始化可以参考另一边文章:参考链接 需要的工具:HBuilderX (本文中版本号为:1.9.0.20190412) 新建 - 项目 - unia ...
- 通过npm引入的echart目录_uniapp npm引用echarts第三方库教程
1. 下载第三方库 uni-app 使用了 mpvue 的部分代码,所以我们的 echarts 库使用兼用 mpvue 版本的 mpvue-echarts,同时需要引用百度的 echarts. 下载流 ...
- python连接sql引用的第三方库_python连接sqlserver数据库操作
简述 python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官 ...
- Android Studio中导入第三方库
之前开发Android都是使用的eclipse,近期因为和外国朋友Timothy一起开发一款应用,他是从WP平台刚切换使用Android的,使用的开发环境时Android Studio,为了便于项目的 ...
- 第三方库并不是必须的
前言 我在Lyft的八年间,很多产品经理以及工程师经常想往我们 app 里添加第三方库.有时候集成一个特定的库(比如 PayPal)是必须的,有时候是避免去开发一些非常复杂的功能,有时候仅仅只是避免c ...
- 脚本程序转变为可执行程序的第三方库——pyinstaller
**PyInstaller**是一个十分神奇的第三方库,它能够在Windows.Linux. Mac OS X 等操作系统下将 Python 源文件打包,通过对源文件打包, Python 程序可以在没 ...
- xcode中用pods管理第三方库转
安装pods :http://www.cnblogs.com/wangluochong/p/5567082.html 史上最详细的CocoaPods安装教程 --------------------- ...
- 安装npm_微信小程序使用npm安装第三方库
嗨,大家好,我是小马丁 这是我的第48篇文章,感谢你的阅读. 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包.此文档要 ...
- gradle 查看依赖类库版本_如何查找第三方库(Gradle引用)的依赖?
原标题:如何查找第三方库(Gradle引用)的依赖? 如何查找第三方库(Gradle引用)的依赖? 每日一问-Tools-20181105 答: 三方法可查找. 1. 执行 Gradle Task : ...
最新文章
- 信号处理函数(2)-sigismember()
- 【Leetcode】刷题题单记录
- 在oracle 11gr2 grid独占模式下,如何使oracle数据库实例伴随OHAS的启动而启动?
- 关于Netty的ByteBuff内存泄漏问题
- Swift-属性监听
- ecs 对比 本地服务器_阿里云服务器双十一活动福利
- 国家邮政局:除夕和初一包裹量超1.3亿件,同比增长223%
- Domino服务器以及Notes客户端重新配置的方法
- [渝粤教育] 西南科技大学 公共组织财务 在线考试复习资料
- Flask框架+ajax框架
- 最新更新云码支付,星糖付多合一全自动码商,商户,代理,支付一体系统完整数据源码
- python 实现 熵值法 确定指标权重
- 学习笔记 | 算法导论学习笔记1
- Tbase 源码 (八)
- 怎么把照片背景换掉?如何给照片换底色?
- 小公司个人技术成长路线思考
- 计算机启动后需重启才能正常显示,电脑开机老是要重启N次后才能正常
- BGP带宽是什么意思
- 中兴oltc320用户手册_中兴OLT常用命令
- kibana服务器性能要求,kibana 性能监控 apm