Vue.js builds your first package and the method steps released on NPM

This article we will learn how to make a VUE plugin and distribute it to npm, allowing other people to install.

The plugin greatly increases the development efficiency of the developer. Most of our projects rely on them because they can publish new features at very fast speed.

As mentioned in the official Vue.js document, the scope of the plugin is not limited. Usually the functions we want to achieve have the following:

  • Add global method (such as: Vue-Custom-Element)
  • Add global resources: instruction / filter / transition Wait (such as: Vue-touch)
  • Add some component options (such as: Vue-Router) [, such as: Vue-Router) [, such as: Vue-Router) to add a Vue instance method, is implemented by adding them to Vue.Prototype (Such as: Vue-Axios)
  • A library provides its own API, and provides one or more features mentioned above (such as: Vue-router)
  • OK, Now you understand what the Vue plugin is, and it can meet what needs!
How to use Plug-in

in the Vue project, you need to import it and call it in the main.js file by NPM Install or Yarn ADD. Vue.use () global method.
Note: All plugins must be instantiated before new Vue ().

Import Vue from “Vue”; import myplugin from “myplugin”; vue.use (myplugin); new Vue ({// […]})

 If the pluginThe package supports the CDN mode reference, or reference can also be referenced in the following manner:   

In addition, when you call Vue.use (), you want to do some custom configurations for the plugin, you can do this:
  Vue.use (MyPlugin, {Option 1: False, option2: true}    
For example, when introducing a popular ELEMENT UI library, it supports incoming global configuration object

Import Element from ‘Element-UI’; import ‘element-ui / lib / theme-chalk / index.css’; Vue.use (Element, {// size) is used to change the component Default size, zindex set the initial z-index of the box (default: 2000) size: ‘small’, zindex: 3000});
   Let us enter the topic ! Started to build your first Vue plugin & # 128170; 
to make a cool button component

As a pursuit front end, I believe When you develop a project in the company, you will definitely think, “If the company has a set of UI component libraries, it is certain!”
If you have this idea, then after you finish reading this article, you will bring you a lot of inspiration and inspiration.
  Step 1: Initialization Plug-in Directory Structure  
Create an empty project folder, the name is free, then initialize the generation package.json file (instext of the content of the file)

$ mkdir ku-button && cd ku-button $ npm init # above this command will prompt some questions, have been entering the bus Putting, then finally create a package.json file

then create an SRC folder in the project root directory, newly built a Kubutton.Vue component, here you can Through the Vue’s Vue Serve and Vue Build command line, the single * .vue file is developed for fast prototyping, but it is necessary to install an additional global extension

$ npm install -g @ Vue / CLI $ npm install -g @ Vue / Cli-Service-Global

After the installation is complete, when you successfully execute the following command line:

$ Vue Serve Kubutton.Vue
  You can access http: // localhost: 8080 /  directly on the browser 
More about Vue fast prototype development knowledge, you can view the official document

Let’s start completeizing the code of the Button button component, let it run!

 Step 2: Improve the component code, let the button configurable   
Here I will imitate the Button component of the ElementUI library, and I will reveal the wonderful Place! Template Template


export default {prOps: {type: {TYPE: STRING, DEFAULT: ‘DEFAULT’, VALIDATOR (TYPE) {Return [‘default’, ‘primary’, ‘info’, ‘warning’, ‘danger’]. include (type)}}, round: {TYPE : Boolean, Default: False}, Size: {Type: String, Default: “Medium”, Validator (Size) {Return [“Medium”, “Small”, “MINI”]. Include (size)}},}, Methods: {onclick (Event) {this. $ EMIT (“Click”, Event);}}};

Pattern style

.Ku-Button {Display: inline-block; Outline: 0; Font-Family: “Helvetica Neue”, Helvetica, Arial, Sans-Serif; User-SELECT : None; CURSOR: POINTer; Line-Height: 1; WHITE-SPACE: NOWRAP; Background-Color: #fff; Border: 1px Solid # dcdfe6; color: # 606266; -webkit-appearance: none; text-align: center; Box-Siting: Border-box; output: .1s; font-weight: 500; padding: 12px 20px; font-size: 4px; border-radius: 4px;} / * color * / .ku-budton –default {} .ku-button – primary {color: #fff; Background-Color: # 409eff; border-color: # 409eff;} .Ku-button – Success {Color: #fff; Background-Color: # 67c23a; border-color: # 67c23a;} .Ku-button – info {color: #fff; Background-Color: # 909399; border-color: # 909399;} .Ku-button – warning {color: # FFF; Background-Color: # e6a23c; border-color: # e6a23c;} .Ku-button – Danger {color: #fff; Background-color:Or: # f56c6c; border-color: # f56c6c;} / * size * / .ku-button – medium {padding: 10px 20px; font-size: 14px; border-radius: 4px;} .Ku-button– Small {padding: 9px 15px; font-size: 12px; border-radius: 3px;} .ku-button – mini {Padding: 7px 15px; font-size: 12px; border-radius: 3px;} / * Corner * / .Ku-Button – Round {Border-Radius: 20px;}

Subsequent we can use like this:
   Small button   The BEM specification is used. (More knowledge about BEM, can be viewed here)  
Configure 3 parameters (button type, button size, buttons are filled) via the PROPS configuration, which makes it easy for users to switch the button of different topics at any time.
Using the SLOT slot so we can use the

button text

to define the @click event, trigger $ EMIT when clicking the component.
   Write an Install method   
The article is mentioned in front of the Vue.Use () method, when it is called, it will execute the install method, this method The first parameter is the VUE constructor, the second parameter is oneAn optional option object.
Here, we create an index.js file in the SRC, then write:

Import kubutton from “./kubutton.vue “Export Default {Install (Vue, Options) {// Register global component // vue.component (“ku-button”, kubutton)}}
   Here, a complete plug-in is almost! & # 128079;   Step 4: Improve the package.json file 

created by NPM INIT

  • {“Private”: False, “Name”: “Ku-Button”, “Version”: “1.0.0”, “Description”: “a niubility button”, “Author “:” sugars “,” license “:” mit “,” main “:” ./dist/index.umd.js “,” scripts “: {” dev “:” Vue Serve Kubutton.Vue “},” Files ” “: [” DIST “],” devdependencies “: {” bili “:” ^ 4.7.3 “,” rollup-plugin-vue “:” ^ 5.0.0 “,” Vue-Template-compiler “:” ^ 2.6.10 “}}

private attribute is false time, your package is not private Everyone can view and npm install Use name property, the package name when the NPM is released, make sure your package is not registered

Version property No. You need to increase the version number when you release update to NPM each time you release. You can view the knowledge of more semantized version numbers

Description attribute finger a description of the package, write, let you know you This package is dry

main property specifies the entry file of the package, and the request (‘ModuleName’) loads this file. The default value of this field is Index.js below the root directory.
The Scripts property specifies the NPM command line abcrulation of the run script command. For example, when Build specifies the command to be executed, the command to be executed.
 FILES properties can specify which files need to be released On NPM, for example, you specify all files in the Dist folder   
You can view more knowledge about package.json in NPM


Package tool here I use Bili, a powerful speed, zero-configured package tool.

Start installing package tool:

 $ npm install --save-dev bili $ npm install --save-dev rollup-plugin-vue $ npm install --save-dev Vue-template-compiLER   
is then created in the root directory of a bili.config.js project profile, configured as follows:

  • module.exports = {banner: true, output: {extractCSS: false, format: [ ‘umd’], moduleName: ‘KuButton’}, plugins: {vue: true}}
  • Upon completion, you just need to execute a command on the package is complete, it’s that simple:
  • $ Bili

after the package is successful, the project root directory will generate a dist folder, which has a index.umd.js documents

share your outcomes
on the npm

here, you vue plugin development is complete. The last remaining step is to publish your plug-in on npmjs!

but only if you need to have a npmjs account, if not need to register a, yes, you can skip this step.

Open a terminal, enter:
$ npm login // Enter, input your fill in registration npmjs user name, password and email // after a successful login, you will be prompted: Logged in as on

to view the current user is logged npm situation:
$ npm whoami // If the login is successful, the output is user login name


Step above no problem checking into the project directory ku-button has just been completed, began Release:
$ npm publish

after successful execution, you plug it released a success! ! & # 127 881;
follow if you want to update the plugin, just add package.json in the version version number, and then perform npm publish publish updates on it again!

used in the project just released a plug

You may like to install other plug-ins as:
    $ npm install --save ku-button 

$ yarn add ku-button

Next, in main.js reference:
import KuButton from “ku-button” import Vue from ” vue “Vue.use (KuButton)

Finally, in your page like this:

so cool! !

attach Github Address

That’s all for this article, hope we learn to help, I hope you will support Tumi cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment