How uni-app references npm third-party libraries

The method for uni-app to reference npm third-party library: first download the third-party library; then create the [uni-app] project; finally use the third-party library in [uni-app], the code is [import * as echarts from 'echarts'].

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

How to reference npm third-party libraries in uni-app:

1. Download the third-party library

uni-app uses part of the code of mpvue, so our echarts library uses the mpvue version of mpvue-echarts, and needs to reference Baidu's echarts.

The download process is as follows:

• Create an empty folder such as: test-echarts.

• Enter test-echarts, open the command line tool, execute npm init and press Enter all the way.

• Download the third-party library: npm install echarts mpvue-echarts --save.

• Enter the node_modules directory, there are three directories inside: echarts, mpvue-echats, zrender is the third-party library we need.

2. Create uni-app project

Create a new uni-app in HBuilderX and copy the three folders just downloaded to The project root directory, the final project screenshot is as follows:

3. Use third-party libraries in uni-app

and general The vue project references third-party libraries in the same way, as shown below, so that we can use echarts and mpvue-echarts in the project.

import * as echarts from 'echarts'  
import mpvueEcharts from 'mpvue-echarts'

The source code of this example is in the attached project. Here are some screenshots of the code and effects:

<template>  
    <div class="container">  
        <mpvue-echarts :echarts="echarts" :onInit="onInit" />  
    </div>  
</template>  
<script>  
    import * as echarts from &#39;echarts&#39;  
    import mpvueEcharts from &#39;mpvue-echarts&#39;  
    function initChart(canvas, width, height) {  
        ......  
    }  
    export default {  
        data() {  
            return {  
                echarts,  
                onInit: initChart  
            }  
        },  
        components: {  
            mpvueEcharts  
        }  
    }  
</script>  
<style>  
    .container {  
        flex: 1;  
    }  
</style>

The above is the detailed content of How uni-app references npm third-party libraries. For more information, please follow other related articles on the PHP Chinese website!