vue encapsulates third-party plug-ins and publishes them to npm instances

This article mainly introduces how vue encapsulates third-party plug-ins and publishes them to npm. It mainly explains how to encapsulate third-party plug-ins into vue plug-ins, simplify configuration, and install them with one click. It mainly provides ideas. The packaging methods are similar. The article is a bit long, so be patient. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

gitment

Gitment is a comment plug-in based on github issues packaging. We use this plug-in as a demonstration and encapsulate it into a vue plug-in. vue-gitment, the plug-in has been published to npm and installed in its own open source project vueblog using

project initialization

to encapsulate the vue plug-in with webpack -simple is very suitable, vue init webpack-simple vue-gitmentThis command creates the directory of our project, creates folders and files, and the final structure is like this

The lib directory is our plug-in directory, the other defaults are just fine

Modify the configuration items

The first is to modify the 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"
}

Add dependency gitment to dependencies. Main is the file entry after we package it. You can use the npm init command to generate a package.json

Modify webpack.config.js

We only need to configure the entrance and exit. Do not delete the default configuration, because we need to check the plug-in developed later. Working effect

Modify index.html

Because we have modified the webpack configuration, we naturally need to modify the src of the script

Encapsulation plug-in

VueComment.vue content is as follows

##

<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>

I believe you are familiar with it You can understand vue at a glance. The render function is a method of the gitment object. Don’t worry about it. It is the same as the component we develop

index.js encapsulated component

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

The entry file we configure in webpack is him. Install is the method of mounting components. With it, we can use a plug-in externally. Let’s make it simple

Test Plug-in

First test whether the build is successful

npm run builddistThe directory will generate the following files

Good news, let’s test whether the plug-in works normally

We need to modify the package and webpack. This is why I said not to delete it but to comment it out. The main of package.json is modified to dist/build.js, the entry and filename of wepack are changed to the default configuration, and the src of index.html is also changed to the default

Introduce our in main.js Use our plug-in

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

in component

<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>

App.vue to execute

npm run dev

Haha, it works normally. Error: Not Found is because I did not configure client_id.

Publish plug-in

After completing the testing work, we can publish it to npm. This is more obvious. Register an npm account. When you want to publish Execute npm login in the project directory, enter your account password and email, and then npm publish will be published successfully. To check the effect, npm install vue-gitment is recommended. It is recommended to look at the source code directly, because it is really simple.

Conclusion

Do it yourself, I think every front-end developer needs a wheel of his own (although vue-gitment is not a wheel), a Belong to your own wheel, and you can learn a lot in the process of making wheels.

Related recommendations:

Summary of ThinkPHP using Smarty third-party plug-in method

Batch encryption of php files without third-party plug-in

What should I do if the Vue reference datepicker plug-in cannot monitor the value of the datepicker input box

The above is the detailed content of vue encapsulates third-party plug-ins and publishes them to npm instances. For more information, please follow other related articles on the PHP Chinese website!