웹 프론트엔드 View.js vue.use를 사용하는 방법

vue.use를 사용하는 방법

Dec 08, 2020 am 09:18 AM
vue

vue.use 사용 방법: 먼저 해당 코드 파일을 연 다음 "vue.use(plugin, 인수)"와 같은 구문을 갖는 전역 메서드 "Vue.use()"를 통해 플러그인을 사용합니다.

vue.use를 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.0, Dell G3 컴퓨터.

추천: "vue Tutorial"

공식 API 소개:

Vue.use(plugin)
로그인 후 복사

공식 웹사이트에서 제공하는 설명은 다음과 같습니다: 전역 메소드 Vue.use()를 통해 플러그인을 사용하세요.

vue.use(plugin, arguments)
로그인 후 복사

Parameters

{Object | function} plugin
로그인 후 복사

Usage

Vue.js 플러그인을 설치하세요. 플러그인이 객체인 경우 설치 방법을 제공해야 합니다. 플러그인이 함수인 경우 설치 방법으로 작동합니다. install 메소드가 호출되면 Vue가 매개변수로 전달됩니다.

이 메서드는 New Vue()를 호출하기 전에 호출되어야 합니다.

동일한 플러그인에서 install 메소드를 여러 번 호출하면 해당 플러그인은 한 번만 설치됩니다.

Element-UI 예제

ElementUI 문서에 따르면 Vue cli로 빌드된 프로젝트에서 ElementUI를 이렇게 사용합니다

/*
mian.js
*/
import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI); // 2
new Vue({
el: '#app',
render: h => h(App)
});
로그인 후 복사

위 코드로 Element 소개가 완료됩니다. 스타일 파일을 별도로 가져와야 한다는 점에 유의하세요. .

나중에 를 사용하여 Vue의 단일 파일 구성 요소에서 Element 요소를 직접 사용할 수 있습니다.

그럼 정확히 무슨 일이 일어났나요?

1. 첫 번째 댓글은 ElementUI

import ElementUI from 'element-ui'
// TODO 理解如何导入模块
以下是src/index.js的内容。可以看到,index.js导出了一个对象,在上面的import语句中,这个对象被赋予ElementUI的变量名。请注意到这里的install函数。
/*
index.js
*/export default {
  version: '2.11.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...
};
로그인 후 복사

2를 가져오는 것입니다. 두 번째 댓글은 ElementUI

Vue.use(ElementUI);
로그인 후 복사

를 설치하는 것입니다. 여기서는 Vue.use 메서드가 사용되고 ElementUI 객체가 전달되는 것을 관찰했습니다. Vue.use 문서에서 ElementUI 객체의 설치 메소드를 호출하고 Vue를 전달한다는 것을 알 수 있습니다.

아아아아

위 내용은 vue.use를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

VUE를 사용하여 단일 헤더 및 다중 바디로 전자 따옴표 양식을 구현하는 방법은 무엇입니까? VUE를 사용하여 단일 헤더 및 다중 바디로 전자 따옴표 양식을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 11:39 PM

VUE의 단일 헤더 및 다중 바디로 전자 견적 양식을 구현하는 방법. 현대 기업 관리에서 인용 양식의 전자 처리는 효율성을 향상시키는 것입니다.

Vue-Router 점프 후 콘솔 네트워크에 페이지 요청 정보가없는 이유는 무엇입니까? Vue-Router 점프 후 콘솔 네트워크에 페이지 요청 정보가없는 이유는 무엇입니까? Apr 04, 2025 pm 05:27 PM

Vue-Router 점프 후 콘솔 네트워크에 페이지 요청 정보가없는 이유는 무엇입니까? 페이지 리디렉션에 Vue-Router를 사용하는 경우

프론트 엔드에서 다른 브랜드의 고성능 작가의 사진 업로드 기능을 구현하는 방법은 무엇입니까? 프론트 엔드에서 다른 브랜드의 고성능 작가의 사진 업로드 기능을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 05:42 PM

프론트 엔드에서 다양한 브랜드의 고음문 작가의 사진 업로드 기능을 구현하는 방법 프론트 엔드 프로젝트를 개발할 때 종종 하드웨어 장비를 통합 해야하는 경우가 종종 있습니다. 을 위한...

45도 곡선 테두리로 분할 효과를 달성하는 방법? 45도 곡선 테두리로 분할 효과를 달성하는 방법? Apr 04, 2025 pm 11:48 PM

사용자 인터페이스 디자인에서 세그먼트 효과를 구현하기위한 팁, 세그먼터는 특히 모바일 애플리케이션 및 반응 형 웹 페이지에서 일반적인 탐색 요소입니다. ...

맵 박스를 사용하여 맵에서 3D 객체의 하단이 고정되어 있는지, vue에서 3.js를 사용하는 방법은 무엇입니까? 맵 박스를 사용하여 맵에서 3D 객체의 하단이 고정되어 있는지, vue에서 3.js를 사용하는 방법은 무엇입니까? Apr 04, 2025 pm 06:42 PM

VUE에서 Mapbox 및 Three.JS를 사용하여 3 차원 객체를 조정하여보기 각도를 매핑하는 방법. Vue를 사용하여 Mapbox와 Three.js를 결합 할 때 생성 된 3 차원 객체는 ...

JavaScript 이름 지정 사양은 Android WebView에서 호환성 문제를 제기합니까? JavaScript 이름 지정 사양은 Android WebView에서 호환성 문제를 제기합니까? Apr 04, 2025 pm 07:15 PM

JavaScript 이름 지정 사양 및 Android ...

el-table을 사용하여 vue2에서 테이블 그룹화, 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까? el-table을 사용하여 vue2에서 테이블 그룹화, 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 07:54 PM

vue2에서 el-table 테이블 그룹 드래그 앤 드롭 정렬 구현. EL-TABLE 테이블을 사용하여 VUE2에서 그룹 드래그 앤 드롭 정렬을 구현하는 것이 일반적인 요구 사항입니다. 우리가 ...

See all articles