As a front-end worker, you can try to write some UI components yourself.

Although it is not necessary to write components, you can better improve your abilities and make your thinking more comprehensive in the process of writing.

After the component is written, it is definitely not possible to copy the folder when it is called later, which is too low. Front-end personnel can publish components to npm, and then they can download their own components with npm install

npm release process

One, create an npm account

npm official website: npm official website

Registering an account with npm is very simple, you only need an email address, you don’t even need a mobile phone
Insert picture description here

Second, create your own components

The vue component I created, npm init creates a new project
when npm is initialized

package name represents the name of the future component
version represents the current version number
Desrciption can describe the component
entrt point stands for entering the file, the default index.js is fine
keywords stands for keywords
author author
license stands for agreement, npm uses ISC, the default is fine

Insert picture description here
The package.json of the project comes out

Three, component configuration index.js

After writing a part of the components, you can configure these components into index.js
Insert picture description here
index.js configuration code:

/*
* @author kongchengji
* Date: 2021/2/1
*/
import Vue from 'vue'

import wzc_select from "./select/wzc-select";
import wzc_option from "./select/wzc-option";
import wzc_button from "./button/wzc-button";
import wzc_switch from "./Switch/wzc-switch";
import wzc_slider from "./Slider/wzc-slider";
import wzc_collapse from "./Collapse/wzc-collapse";
import wzc_collapse_item from "./Collapse/wzc-collapse-item";
import wzc_color_picker from "./ColorPicker/wzc-color-picker";
import wzc_timeline from "./TimeLine/wzc-timeline";
import wzc_timeline_option from "./TimeLine/wzc-timeline-option";
import wzc_dividingline from "./DividingLine/wzc-dividingline";
import wzc_picview from "./PicView/wzc-picview"

const components = [
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
]

const install = function(Vue) {
    
    
    if(install.installed) return
    components.map(component => Vue.component(component.name, component))
    // Vue.prototype.$message = Message
  }
  
  
export default {
    
    
    install,
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
}

Four, terminal login to npm and publish npm

Enter in the terminal npm loginto log in.
Enter the account, password, and email. The
password will not be displayed when you enter it. When
Insert picture description here
publishing npm, use it npm publishfor publishing. After the

publishing is successful, the mailbox will receive a successful publishing email by default.
At this time, it is in your npm warehouse. You can see the released components in

Five, npm modification

If your component is defective and you want to modify it, npm publishdo not forget to modify the version number when submitting after modification, otherwise the release will fail.
Insert picture description here
Failed release

npm publishes its own components