preface

To avoid reinventing the wheel, the UI library uses Ant-design-Vue, but sometimes when the UI library components are not suitable for business development, often we will write some components ourselves, business related components, so in this scenario, why don’t we publish a UI component library for our own use, Currently we are based on Ant-Design-Vue components, which are reused for multiple projects as the business functions are complex. Why do we need NPM to manage components, which is tedious and not conducive to code management and component sharing

Development process vuE-CLI3.0

1. Add a vUE project and develop your own component library, vue Create. ( Represents the directory under which a project is created

` ` ` bash ├ ─ ─ the build # building related ├ ─ ─ public # static resource │ │ ─ ─ the favicon. Ico # favicon icon │ └ ─ ─ index. The HTML # HTML templates ├ ─ ─ # examples Component demo ├ ─ ─ packages # component │ │ ─ ─ button │ ├ ─ ─ │ ─ ─ SRC/button. The vue │ ├ ─ ─ │ ─ ─ index. The js ├ ─ ─ the SRC # source ├ ─ ─ tests # test ├ ─ ─ .esLintrc.js # EsLint Configuration Item ├─.. Eslintignore # esLint Ignore File ├─.babelrc # babel-loader Configure ├─.travis. Yml # Automatic CI Configure ├─.nPMIgnore # NPM Ignore File ├─ ├─ ├─ ├─ download.txt # download.txt # download.txt # download.txt # download.txtCopy the code

For example, create a button component called button.vue

<template> <button class="y-button" :class="{ [`icon-${iconPosition}`]: true }" @click="$emit('click')"> <g-icon class="icon" v-if="icon && ! loading" :name="icon" /> <g-icon class="loading icon" v-if="loading" name="loading"></g-icon> <div class="y-button-content"> <slot /> </div> </button> </template> <script> /* * @Author: zhangbinzhbb * @Date: 2021-02-24 17:23:33 * @Last Modified by: zhangbiaobin * @Last Modified time: 2021-02-24 17:23:33 * package button */ import Icon from '.. /.. /icon'; export default { name: 'YButton', components: { 'g-icon': Icon, }, props: { icon: {}, loading: { type: Boolean, default: false, }, iconPosition: { type: String, default: 'left', validator(value) { return value === 'left' || value === 'right'; }},}}; </script> <style lang="less" scoped> @import '~/src/styles/components/button.less'; </style>Copy the code

New button/index. Js

import GlButton from './src/button';

GlButton.install = function(Vue) {
  Vue.component(GlButton.name, GlButton);
};

export default GlButton;
Copy the code

Create index.js to export all components

import gButton from './button'; import gpagination from './pagination'; import gcommon from './common'; import gbuttonAction from './buttonAction'; import glinkTag from './linkTag'; import gspin from './spin'; / /... Const components = [gButton, gpagination, gcommon, gbuttonAction, glinkTag, gspin, if any]; Const install = function(Vue) {const install = function(Vue) {const install = function(Vue) {if (install.installed) return; install.installed = true; Component.map (component => Vue.com (component.name, component)); Prototype.$YSpin = gspin; // Components. Map (Component => vue.use (Component)) vue.prototype. / / global}; /* Support for using tags to import */ if (typeof window! == 'undefined' && window.Vue) { install(window.Vue); } export default {install, // All components must have install to use vue.use ()... components, };Copy the code

Package. The json baidu search vue – cli lib cli.vuejs.org/zh/guide/bu… — Target allows you to build any component in your project as a library or Web Components component

package.json

"mian":'lib/w-component.umd.min.js'
"build": "vue-cli-service build --target lib --name w-component --dest lib packages/index.js",
Copy the code

Finally packaged into the following files

Dist/mylib.umd.min.js 13.28 KB 8.42 KB Dist/mylib.umd.js 20.95 KB 10.22 KB dist/mylib.mon.js 20.57 KB 10.09 KB Dist/mylib. CSS 0.33 KB 0.23 KBCopy the code

Building a library outputs:

  1. Dist/mylib.common.js: a CommonJS package for packers (unfortunately, Webpack doesn’t currently support ES Modules output)
  2. Dist/mylib.umd. js: a UMD package for use directly by browsers or AMD loaders
  3. Dist/mylib.umd.min.js: compressed UMD build
  4. Dist/mylib.css: Extracted CSS file (you can force inlining by setting CSS: {extract: false} in vue.config.js)

Upload the code to npmjs.org

  1. Update package. Json

1. Change the version number to 0.0.1 in package.json and then change it to 1.0.0 when we are done. Create index.js and export everything you want to export in index.js

  1. Go to www.npmjs.com/ and set up an account

  2. Confirm email address (must)

  3. Run NPM adduser at the root of the Winhong-Component project

  4. – If the error message contains “registry.npm.taobao.org”, it indicates that your NPM source is currently taobao source, you need to change to the official NPM source

  5. Run the NPM publish

See the NPM library winhong-component

Publish the package to NPM private server

First, we look at the silent Settings for the project through the NPM config list command

npm config list
Copy the code

The registry property points to the NPM’s lawsuit locationregistry.npmjs.org/We can modify this configuration by using the NPM config set Registry command.

npm config set registry http://xxx/repository/npmhosted.org/
Copy the code

Run the NPM config list command again to verify that NPM publish proxy is successfully set

npm publish --registry=http://xxxx/repository/npmhosted.org/
Copy the code
git remote add origin http://xxx/web-project/w-components.git
Copy the code

How to use it in VUE project

In the past, project components were maintained in the project Components folder. The advantage of this is that problems can be timely modified. However, when the same component is used in multiple projects, project components of A are updated and modified, but project B is not handled in time, which may cause functional problems. It can also be tedious to migrate components from one project to another by copying them from another. Easy to lose files,## Use components

npm i --save winhong-component
Copy the code

##main.js registers the wh-component

import winhongcomponent from "winhong-component";
import "winhong-component/lib/winhong-component.css";
Vue.use(winhongcomponent);
Copy the code

See XXX ## update dependencies for more component apis

### NPM dependenciesCopy the code

npm i winhong-component@latest –save

### YARN dependency packageCopy the code

yarn add winhong-component@latest

Possible error handling, babel.config.js' 'vue presets: [["@vue/cli-plugin-babel/preset", {useBuiltIns: "entry"}]]Copy the code
NPM I --save vue vue-router Caused by inconsistent vuex versions?Copy the code
Copy the code