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