uniapp에서 npm 타사 라이브러리를 사용하는 방법

coldplay.xixi
풀어 주다: 2023-01-13 00:44:08
원래의
9450명이 탐색했습니다.

uniapp에서 npm 타사 라이브러리를 사용하는 방법: 먼저 타사 라이브러리를 다운로드하고 [uni-app] 프로젝트를 만든 다음 [uni-app]에서 타사 라이브러리를 사용하세요. 코드는 [import * 'echarts'의 echarts로 】.

uniapp에서 npm 타사 라이브러리를 사용하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터.

권장(무료): uni-app 개발 튜토리얼

uniapp용 npm 타사 라이브러리 사용 방법:

1 타사 라이브러리

uni-app을 다운로드하세요. mpvue 코드의 일부를 사용하므로 echarts 라이브러리는 mpvue-echarts의 mpvue 버전을 사용하며 Baidu의 echarts를 참조해야 합니다.

다운로드 과정은 다음과 같습니다.

  • test-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,将将刚才下载的三个文件夹拷贝到项目根目录,最终项目截图如下:

uniapp에서 npm 타사 라이브러리를 사용하는 방법

3. 在uni-app里面使用第三方库

和一般的 vue 项目引用第三方库的方法一样,如下所示,这样我们就能在工程里面使用 echarts mpvue-echarts

test-echarts를 입력하여 명령줄 도구를 열고 npm init를 실행한 다음 Enter 키를 누르세요.

uniapp에서 npm 타사 라이브러리를 사용하는 방법타사 라이브러리를 다운로드하세요: npm install echarts mpvue-echarts --save.

node_modules 디렉터리를 입력하세요. 내부의 세 디렉터리인 echarts, mpvue-echats 및 zrender는 우리에게 필요한 타사 라이브러리입니다.

2. uni-app 프로젝트 생성
🎜🎜HBuilderX에서 새로운 uni-app을 생성하고 방금 다운로드한 3개의 폴더를 프로젝트 루트 디렉터리에 복사합니다. : 🎜 🎜 🎜 🎜 🎜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 &#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>
로그인 후 복사
🎜🎜🎜🎜🎜관련 무료 학습 권장 사항: 🎜프로그래밍 비디오🎜🎜🎜

위 내용은 uniapp에서 npm 타사 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿