Vue 플러그인 패키징부터 퍼블리싱까지 자세한 설명

이 글은 주로 첫 번째 Vue 플러그인의 패키징부터 퍼블리싱까지의 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

머리말

이것은 제가 패키징한 첫 번째 Vue 플러그인입니다. 이 기능은 단순한 플러그인이지만 여전히 매우 기쁩니다.

플러그인 주소 : https://github.com/leichangchun/vue-area-select 정정 환영합니다

Preparation

Vue 공식 홈페이지 플러그인 부분에 대한 소개가 매우 엉성하지만 간단합니다. 여전히 좋은 리뷰입니다. 이 플러그인은 비교적 간단하기 때문에 다음 두 가지 점을 주로 사용합니다:

　1. Vue 플러그인에는 공개 메소드 install이 필요합니다

　2. 전역 메소드 Vue.use( ), 아래에 생성된 밤나무

가 있습니다. 프로젝트

초기화 프로젝트

vue init webpack-simple projectName
cd projectName
cnpm install //安装依赖

다음과 같이 개발 컴포넌트 디렉토리를 생성합니다.

개발 플러그인

플러그인 입구 index.js에 필요한 플러그인 컴포넌트 소개 및 설치 방법 작성

import vueAreaSelect from './components/vue-area-select' //引入组件
const areaSelect = {
 install (Vue, options) {
 Vue.component(vueAreaSelect.name, vueAreaSelect) //全局组件
 }
}

export default areaSelect //导出

　 vue-area-select.vue 플러그인의 구체적인 구현 부분이므로 자세히 소개하지 않겠습니다. 세부.

　디버깅 중 참고 방법은 index.js 파일을 도입하는 것입니다

//引入
import areaSelect from './index.js'

Vue.use(areaSelect)


//.vue中 使用

<vue-area-select></vue-area-select>

　디버깅이 완료된 후 npm으로 빌드한 후 퍼블리싱해야 합니다. 빌드할 때 먼저 webpack.config.js의 구성을 수정한 후 npm run build the package file

 // entry: './src/main.js', //npm run dev时 demo调试的入口
 entry: './src/index.js', //打包时 插件入口
 output: {
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 // filename: 'build.js'
 filename: 'vue-area-select-lei.js', //打包生成文件的名字
 library:'AreaSelect', //reqire引入的名字
 libraryTarget:'umd',
 umdNamedDefine:true
 }

이제 플러그인 개발 부분이 완료되었습니다. 그런 다음 npm을 통해 게시해야 합니다.

NPM release

먼저 package.json을 구성하고 다음 항목을 추가해야 합니다

 "private": false,
 "main": "dist/vue-area-select-lei.js", //import引入时默认寻找的文件
 "repository": { //仓库地址
 "type": "git",
 "url": "https://github.com/leichangchun/vue-area-select"
 },

그런 다음 npm 로그인 로그인 계정 npm 게시 게시 플러그인

플러그인 사용 효과

npm install vue-area-select-lei --save //安装
//插件的方式引入使用
import areaSelect from 'vue-area-select-lei'
Vue.use(areaSelect)

는 다음과 같습니다:

관련 추천:

vue 플러그인 예제 공유 작성 방법

vue 플러그인 작성 방법 vue.js 예제 튜토리얼

Tutorial Vue

에서 입력 구성요소를 캡슐화하는 방법에 대해 알아보세요.

위 내용은 Vue 플러그인 패키징부터 퍼블리싱까지 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!