Vue-loading plug-in development + NPM deployment

Introduction to the

As a development MOE new, has been adhering to the wheels of the porter, sometimes sigh handling really cool principle, ha ha ha, laugh at you. But, to be honest, I have a sincere respect for those who develop plug-ins. I admire their ability to benefit everyone and save most of the development time.

So I decided to learn to develop a plug-in of my own, and publish it to NPM to benefit everyone hahaha, although I am a cute new, I will try my best.

directory

• Plug-in Features overview
• Deployment Preparations
• Deployment project
• validation
• conclusion

Plug-in Features overview

Function: Implement a loading function. Users can also customize the style, size and text.

Introduction: This is the first release and mainly focuses on the release process flow. So only three loading components are encapsulated. In future releases, many categories will be added. We have any good suggestions can also provide me, let me improve.

Component 1: circular loading

  <ys-load-ring text='loading':isShow='true'></ys-load-ring>
Copy the code

Parameters:

Display:

Component 2

<ys-load-wave :isShow='true'></ys-load-wave>
Copy the code

Component 3

 <ys-load-bobble :isShow='true'
Copy the code

summary

Deployment Preparations

A. Understand the working principle of vUE plug-in

We all know that plug-ins are introduced via vue.use (), so how does it work? Take a look at the API. Parameters:

{Object | Function} plugin

Usage:

Install vue.js plug-in. If the plug-in is an object, the install method must be provided. If the plug-in were a function, it would be used as the install method. When the install method is called, Vue is passed in as an argument.

This method needs to be called before calling new Vue().

When the install method is called multiple times by the same plug-in, the plug-in will only be installed once.

B. Install method:

The first parameter of install is Vue by default:

import YsLoadRing from './YSLoadRing'
import YsLoadBobble from './YSLoadBobble'
import YsLoadWave from './YSLoadWave'
import Vue from 'vue'

const components = {
  YsLoadRing,
  YsLoadBobble,
  YsLoadWave

}
function install () {
  Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
  })
}
export default { install }
Copy the code

Import all components, register globally in the install function, and then export the function. Therefore, this file is the entry file for the plug-in.

C. Configure the package.json file

{
  "name": "load-vue"// Project name"version": "0.0.1"// The version number must be different for each release"private": false// Whether private"main": "./src/components/Load/index.js"// The entry file must be the same Js file that you just wrote"scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^ 3.6.4 radar echoes captured." "."vue": "^ 2.6.11." "."vue-router": "^ 3.1.6." "
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^ 4.3.0"."@vue/cli-plugin-eslint": "^ 4.3.0"."@vue/cli-plugin-router": "^ 4.3.0"."@vue/cli-service": "^ 4.3.0"."@vue/eslint-config-standard": "^ 5.1.2." "."babel-eslint": "^ 10.1.0"."eslint": "^ 6.7.2." "."eslint-plugin-import": "^ 2.20.2"."eslint-plugin-node": "^ 11.1.0"."eslint-plugin-promise": "^ 2"."eslint-plugin-standard": "^ 4.0.0"."eslint-plugin-vue": "^ 6.2.2." "."less": "^ 3.0.4"."less-loader": "^ 5.0.0"."vue-template-compiler": "^ 2.6.11." "}}Copy the code

D. Register an NPM account

Go directly to the official website to register, stupid process.

Deployment project:

By default, all the above steps are completed step by step, so open the name line:

A. Enter NPM login to login to NPM. Enter the registered account and password email address

B. Type NPM whoami and your user name will be displayed if the login succeeds

C. Upload file NPM publish in the last step

D1: Email verification is required when registering, mobile phone click is invalid, you must use computer to click computer to open!! Otherwise you will get this error:

D2: When this error is encountered:

D3: Need to change taobao source to NPM source.

Validation:

When we’re done publishing, we go to the NPM home page and it looks like this:

Conclusion:

Finally finally, had own plug-in, want careful caress, grow sturdily. Next, is ready to do an official website, to introduce themselves. When it becomes a towering tree, ha ha ha ha, I have bald…

Understand componentization thinking, understand componentization development. Just like the globalization of the economy hahahahaha.

A deep into the front ah, not anxious, step by step.