站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        uni-app如何引用npm第三方庫

        uni-app引用npm第三方庫的方法:首先下載第三方庫;然后創(chuàng)建【uni-app】工程;最后在【uni-app】里面使用第三方庫,代碼為【import * as echarts from 'echarts'】。

        uni-app如何引用npm第三方庫

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

        推薦(免費):uni-app開發(fā)教程

        uni-app引用npm第三方庫的方法:

        1. 下載第三方庫

        uni-app 使用了 mpvue 的部分代碼,所以我們的 echarts 庫使用兼用 mpvue 版本的 mpvue-echarts,同時需要引用百度的 echarts。

        下載流程如下:

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

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

        • 下載第三方庫:npm install echarts mpvue-echarts –save。

        • 進入 node_modules 目錄,里面的三個目錄:echartsmpvue-echatszrender就是我們需要的第三方庫。

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

        在 HBuilderX 里面新建 uni-app,將將剛才下載的三個文件夾拷貝到項目根目錄,最終項目截圖如下:

        uni-app如何引用npm第三方庫

        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>

        uni-app如何引用npm第三方庫

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 久久ww精品w免费人成| 亚洲一二成人精品区| 久久精品嫩草影院| 日韩亚洲精品福利| 亚洲国产精品久久| 国产午夜福利精品久久2021 | 国产精品内射后入合集| 精品久久久久久国产牛牛app | 国产精品爱啪在线线免费观看| 亚洲国产精品日韩| 久久久国产精品| 国产系列高清精品第一页| 56prom精品视频在放免费| 国产精品成人va在线观看| 精品国精品无码自拍自在线| 中文字幕久久精品无码| 久久久久久青草大香综合精品 | 香港三级精品三级在线专区 | 精品中文高清欧美| 99久免费精品视频在线观看| 国产精品一区二区不卡| 国产精品一久久香蕉国产线看观看 | 国产精品1024在线永久免费| 国产第一福利精品导航| 国产午夜福利精品一区二区三区 | 国产精品亚洲а∨无码播放| 久久久久人妻精品一区 | 华人亚洲欧美精品国产| 大伊香蕉精品视频在线导航| 国产91精品在线观看| 国产福利微拍精品一区二区| 国内精品久久久久久99蜜桃| CAOPORM国产精品视频免费| 97久久精品国产精品青草| 国产在线精品网址你懂的| 久久成人国产精品二三区| 丝袜美腿国产精品视频一区| 国产高清在线精品一本大道| 久久精品亚洲欧美日韩久久| 亚洲AV永久无码精品一区二区| 亚洲Av无码精品色午夜|