vue는 타사 플러그인을 캡슐화하여 npm 인스턴스에 게시합니다.

이 글에서는 주로 타사 플러그인을 Vue 플러그인으로 캡슐화하여 npm에 게시하는 방법을 소개합니다. 주로 타사 플러그인을 Vue 플러그인에 캡슐화하고 구성을 단순화하며 원클릭으로 설치하는 방법을 설명합니다. 주로 아이디어를 제공합니다. 포장 방법은 비슷합니다. 인내심을 가지셔야 합니다. 편집자님이 꽤 좋다고 하셔서 지금 공유하고 참고용으로 드리고 싶습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

gitment

gitment는 github 이슈 패키지를 기반으로 한 주석 플러그인입니다. 이 플러그인을 데모로 사용하고 이를 vue 플러그인에 캡슐화하세요. vue-gitment, 이 플러그인은 npm에 게시되었으며 자체 오픈 소스 프로젝트 vueblog

Project 초기화

vue를 캡슐화하는 플러그인은 webpack-simple을 사용하는 데 매우 적합합니다. vue init webpack-simple vue -gitment이 명령은 프로젝트의 디렉터리를 생성하고 폴더와 파일을 생성하며 최종 구조는 다음과 같습니다vue init webpack-simple vue-gitment此命令创建我们的项目的目录，创建文件夹和文件，最后结构是这样的

lib目录是我们的插件目录，其他的默认就好

修改配置项

首先是修改package.json

{
 "name": "vue-gitment",
 "version": "0.1.1",
 "description": "A comment plugin by gitment",
 "main": "dist/vue-gitment.js",
 "directories": {
  "dist": "dist"
 },
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/vue-blog/vue-gitment.git"
 },
 "dependencies": {
  "gitment": "^0.0.3",
  "vue": "^2.3.3"
 },
 "devDependencies": {
 },
 "author": "wmui",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/vue-blog/vue-gitment/issues"
 },
 "homepage": "https://github.com/vue-blog/vue-gitment#readme"
}

把依赖性gitment添加到dependencies，main是我们打包后的文件入口，你可以用npm init命令生成一个package.json

修改webpack.config.js

我们只需配置入口和出口，不要删除默认的配置，因为后面开发好插件，我们需要查看工作效果

修改index.html

因为我们修改了webpack配置，自然要把script的src修改一下

封装插件

VueComment.vue内容如下

<template>
 <p v-comment="options"></p>
</template>
<script>
// 引入依赖项
import Gitment from &#39;gitment&#39;
export default {
 name: &#39;vue-comment&#39;,
 props: [&#39;options&#39;],
 directives: {
  // 自定义指令
  comment: {
   bind: function (el, binding) {
    const gitment = new Gitment({
     id: binding.value.id + &#39;&#39;,
     owner: binding.value.owner,
     repo: binding.value.repo,
     oauth: {
      client_id: binding.value.oauth.client_id,
      client_secret: binding.value.oauth.client_secret
     }
    })
    gitment.render(el)
   }
  }
 }
}
</script>

相信熟悉vue的一眼都看懂了，render函数是gitment对象的方法，不用关心，和我们开发组件是一样一样的

index.js封装组件

import VueComment from './VueComment.vue'
const comment = {
 install: function(Vue) {
  Vue.component(VueComment.name, VueComment)
 }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) { 
  window.Vue.use(comment) 
}
export default comment

我们在webpack配置的入口文件就是他，install是挂载组件的方法，有了它我们就可以在外部use一个插件了，简单吧

测试插件

首先测试build是否成功

npm run builddist目录会生成如下文件

可喜可贺，接下来测试插件是否正常工作

我们需要把package和webpack的修改一下，这就是为什么我前面说不要删除而是注释掉 ，把package.json的main修改为dist/build.js，wepack的entry和filename换成默认配置，index.html的src也换成默认的

在main.js中引入我们的组件

import VueComment from './lib/index.js'
Vue.use(VueComment)

App.vue中使用我们的插件

<template>
 <p id="app">
  <vue-comment :options="options" v-if="options"></vue-comment>
 </p>
</template>
<script>
export default {
 name: &#39;App&#39;,
 data() {
  return {
   options: {
    id: &#39;article id&#39;,
    owner: &#39;Your GitHub ID&#39;,
    repo: &#39;The repo to store comments&#39;,
    oauth: {
     client_id: &#39;Your client ID&#39;, 
     client_secret: &#39;Your client secret&#39;,
    } 
   }
  }
 }
}
</script>
<style>
  @import &#39;~gitment/style/default.css&#39;;
</style>

执行npm run dev

lib 디렉터리는 플러그인 디렉터리이며, 다른 기본값은 괜찮습니다

구성 항목 수정

첫 번째는 package.json을 수정하는 것입니다

rrreeeAdd dependency gitment to dependency. npm을 사용할 수 있습니다. package.json을 생성하는 init 명령

Webpack.config.js

수정 " width="451" height="269 " alt=""/>

입구와 출구만 구성하면 되고 기본 구성은 삭제하지 마세요. 나중에 플러그인을 개발한 후에는 확인이 필요하기 때문입니다. 작업 효과

수정 index.html

웹팩 구성을 수정했기 때문에 당연히 스크립트의 src도 수정해야 합니다

Package 플러그인🎜🎜🎜🎜VueComment.vue 내용은 다음과 같습니다🎜🎜🎜

🎜🎜rrreee🎜vue에 익숙한 사람이라면 누구나 한 눈에 이해할 수 있을 거라 믿습니다. render 함수는 gitment 객체의 메소드는 걱정하지 마세요. 우리가 개발하는 컴포넌트와 동일합니다. 🎜🎜🎜index.js 패키지 컴포넌트🎜

🎜🎜rrreee🎜 우리가 webpack에서 설정한 엔트리 파일은 그이고, 인스톨하는 것은 hanger 컴포넌트를 로딩하는 방식으로, 플러그인을 사용할 수 있습니다. 외부적으로는 간단합니다🎜🎜🎜플러그인 테스트🎜🎜🎜🎜먼저 빌드 성공 여부 테스트🎜🎜🎜npm run builddist디렉토리가 생성됩니다. 다음 파일🎜🎜🎜🎜축하합니다, 다음에는 테스트해보겠습니다 플러그인이 제대로 작동하는지 ? 🎜🎜🎜 패키지와 webpack을 수정해야 합니다. 그래서 삭제하지 말고 주석 처리하라고 했습니다. package.json의 메인을 dist/build.js로 변경하고, wepack의 항목과 파일 이름을 바꾸세요. . 기본 구성으로 변경되었으며 index.html의 src도 기본으로 변경되었습니다. 🎜🎜🎜main.js에 구성 요소를 소개하세요🎜

🎜🎜rrreee🎜앱에서 플러그인 사용 .vue🎜

🎜🎜rrreee🎜Execute npm run dev 🎜🎜🎜🎜🎜하하, 정상적으로 작동합니다. 오류: client_id를 구성하지 않았기 때문에 찾을 수 없습니다. 🎜🎜🎜Publish Plug-in🎜🎜🎜🎜테스트 작업을 완료한 후 npm에 게시할 수 있습니다. npm 계정을 등록하고 게시하려는 프로젝트 디렉터리에서 npm 로그인을 실행한 후 계정을 입력하면 됩니다. 비밀번호와 이메일을 입력하고 npm 게시가 성공적으로 완료되면 npm install vue-gitment를 사용하여 효과를 확인하는 것이 매우 간단하므로 소스 코드를 직접 살펴보는 것이 좋습니다. 🎜🎜🎜결론🎜🎜🎜🎜모든 프론트엔드 개발자는 자신만의 휠이 필요하다고 생각합니다(vue-gitment는 휠이 아니지만). 바퀴를 만드는 프로젝트에서 많은 것을 배우십시오. 🎜🎜관련 권장 사항: 🎜🎜🎜 Smarty 타사 플러그인 방법을 사용하는 ThinkPHP 요약 🎜🎜🎜🎜타사 플러그인 없이 PHP 파일 일괄 암호화 🎜🎜🎜🎜Vue가 datepicker 플러그를 참조하는 경우 어떻게 해야 합니까? -in에서는 날짜 선택기 입력 상자의 값을 모니터링할 수 없습니다🎜🎜

위 내용은 vue는 타사 플러그인을 캡슐화하여 npm 인스턴스에 게시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!