uniapp怎么使用npm第三方庫(kù)

uniapp使用npm第三方庫(kù)的方法：首先下載第三方庫(kù)，并創(chuàng)建【uni-app】工程；然后在【uni-app】里面使用第三方庫(kù)，代碼為【import * as echarts from 'echarts'】。

本教程操作環(huán)境：windows7系統(tǒng)、uni-app2.5.1版本，該方法適用于所有品牌電腦。

推薦（免費(fèi)）：uni-app開發(fā)教程

uniapp使用npm第三方庫(kù)的方法：

1. 下載第三方庫(kù)

uni-app 使用了 mpvue 的部分代碼，所以我們的 echarts 庫(kù)使用兼用 mpvue 版本的 mpvue-echarts，同時(shí)需要引用百度的 echarts。

下載流程如下：

• 創(chuàng)建一個(gè)空的文件夾如：test-echarts。

• 進(jìn)入 test-echarts 打開命令行工具，執(zhí)行 npm init 一路回車即可。

• 下載第三方庫(kù)：npm install echarts mpvue-echarts --save。

• 進(jìn)入 node_modules 目錄，里面的三個(gè)目錄：echarts、mpvue-echats 、zrender 就是我們需要的第三方庫(kù)。

2. 創(chuàng)建uni-app工程

在 HBuilderX 里面新建 uni-app，將將剛才下載的三個(gè)文件夾拷貝到項(xiàng)目根目錄，最終項(xiàng)目截圖如下：

3. 在uni-app里面使用第三方庫(kù)

和一般的 vue 項(xiàng)目引用第三方庫(kù)的方法一樣，如下所示，這樣我們就能在工程里面使用 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>

相關(guān)免費(fèi)學(xué)習(xí)推薦：編程視頻