How to develop a Vue component library from 0 and publish it to NPM

1. Create a folder and open it on the terminal and run NPM init -y

Generate package.json as follows, note that if you want to publish to NPM,name cannot have underscores, uppercase letters, etc

{" name ":" vuecomponentdi ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }Copy the code

2. Establish a directory structure

The directory structure is as follows

-- vueComponentDi
    -- packages
        -- button
            -- index.js
            -- index.vue
        -- toast
            -- index.js
            -- index.vue
    -- index.js
    -- package.json

Copy the code

3. Local debugging

vueComponentDi/index.js

Export default function(){console.log(' local debug ')}Copy the code

Create a new VUE project

vue create testvue
Copy the code

The test under package.json under testvue relies on devDependencies to add the absolute address vueComponentDi/index.js

"devDependencies": { ... "Vuecomponentdi ": "F:/vueComponent@Di/ vuecomponentdi",// Fill in your actual project address... }Copy the code

Perform NPM link

Perform NPM link on testvue to soft link vuecomponentdi to node_modules

Vuecomponentdi installation Eslint

Because testvue imported components will be checked by Eslint, failing to install them will cause an error (testvue disabled Eslint can omit this step)

Installation method:

NPM install [email protected] --save-dev./node_modules/.bin/eslint --initCopy the code

Use vuecomponentdi in Testvue

import test from “vuecomponentdi”

<template> <div class="home"> <img alt="Vue logo" src=".. /assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import test from "vuecomponentdi" export default { name: 'Home', components: { HelloWorld }, created(){ test() } } </script>Copy the code

Console Print > Local Debug

4. Develop a Button component

Button module: enter vueComponentDi/packages/button/index. The vue

V-on =” Listemers “means v−on event listeners that contain the parent scope (without the. Native modifier), which can be denoting by v−on=” Listemers” that contain the parent scope (without the. Native modifier). V-on event listeners, which can be represented by V-ON =”listemers” containing v−on event listeners in the parent scope (without the. Native modifier), can be passed into internal components via V −on=”listerners”

<template>
    <div>
        <button class="di-button"  v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button>
    </div>
</template>
<script>
export default {
    name:"di-button",
    props:{
        type:String
    }
}
</script>
<style>
.di-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.di-button:focus, .di-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
.di-button:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
}
.di-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
.di-button--primary:focus, .di-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}
.di-button--primary.is-active, .di-button--primary:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
}
</style>
Copy the code

Button module exports: enter vueComponentDi/packages/button/index. Js

If you export an object with the install function, you can call this function directly in Vue2 using vue.use (xx), which creates a component by executing Vue.component(name,option)

import button from "./index.vue"
button.install=(Vue)=>{
    Vue.component(button.name,button)
}
export default button
Copy the code

Aggregate export button: go to vueComponentDi/index.js

Because you are developing more than one component, you need to export it uniformly in the entry file

import diButton from "./packages/button"
export {
    diButton
}
Copy the code

Used in testvue

<template> <div class="home"> <di-button type="primary"> </di-button> </div> </template> <script> // @is an alias to /src import Vue from 'vue' import {diButton} from "vuecomponentdi" Vue.use(diButton) export default { name: 'Home' } </script>Copy the code

5. Develop a Toast popup

Toast modules: vueComponentDi/packages/toast/index. The vue

Type Supports only warning and SUCCESS

<template>
    <div class="di-toast" :class="`di-toast--${type}`" v-if="show">
        {{message}}
    </div>
</template>
<script>
export default {
    data(){
        return {
            message:'',
            show:false,
            type:''
        }
    }
}
</script>
<style>
.di-toast{
    width: 60%;
    width: 200px;
    background: rgb(15, 15, 15);
    padding:3px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    left: calc(50% - 100px);
    top: 200px;
}
.di-toast--warning{
    background: #FDF6EC;
    color: #E6A28B;
}
.di-toast--success{
    background: #F0F9EB;
    color: #93C26D;
}
</style>
Copy the code

Toast module exports: vueComponentDi/packages/toast/index. Js

We use the vue. extend method because the Toast popover needs to support the this.$toast call in vue. This API is rarely used in daily development, but is usually used when developing components. The parameter is an object that contains component options

import toast from './index.vue' toast.install = (Vue) => { const toastConstructor = Vue.extend(toast); // Using the base Vue constructor, create a "subclass". The parameter is an object that contains component options. let $vm = new toastConstructor(); $el = $vm.$mount().$el; AppendChild ($el); //$vm manually mount() returns an object with $el, which is a DOM object document.querySelector("body").appendChild($el); $toast = (option) => {$vm. Show = true if (! $vm.message = option} else {$vm.message = option. Message $vm.type = option option.type } setTimeout(() => { $vm.show = false }, 2000) } } export default toastCopy the code

Aggregation export :vueComponentDi/index.js

import diButton from "./packages/button" 
import toast from "./packages/toast" 

export {
    diButton,
    toast
}
Copy the code

Toast is used in vuetest

<template> <div class="home"> <di-button type="primary" @click="toast"> </di-button> </div> </template> <script> // @ is an alias to /src import Vue from "vue"; import { diButton, toast } from "vuecomponentdi"; Vue.use(diButton); Vue.use(toast); Export default {name: "Home", methods: {toast() {// this.toast(" this is a normal popover "); / / this. $toast ({/ / the message: "this was a successful play window", / / the type: "success", / /}); $toast({message: "this is a warning popup ", type: "warning",}); ,}}}; </script>Copy the code

Publish to NPM

Public configuration

Once the components are developed, they need to be published to NPM for others to use. Is released for public pack, so need to vueComponentDi/package configuration in json

"publishConfig": {
    "access": "public"
  },
Copy the code

The complete package. Json:

{" name ":" vuecomponentdi ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": {" eslint ":" ^ 6.7.2 ", "eslint - plugin - vue" : "^ 8.2.0"}, "publishConfig" : {" access ":" public "}}Copy the code

release

NPM publishing is simple and requires only two commands:

npm login
npm publish
Copy the code

NPM login requires an NPM account. You can register at the NPM website

Once released, it can be installed and used in any VUE2 project:

npm install vuecomponentdi
Copy the code

Git address: Vue component development

How to develop a Vue component library from 0 and publish it to NPM

1. Create a folder and open it on the terminal and run NPM init -y

2. Establish a directory structure

3. Local debugging

4. Develop a Button component

5. Develop a Toast popup

Publish to NPM

Related Posts

Why Hooks?

Generalize the application scenarios and structure security of JWT authentication

React. Js and vue.js feel – A partial understanding of the componentization idea of front-end development