Above: Recently learning element-UI, trying to build my own front-end component library (Vue based) and publish to NPM

1. Set up the directory structure

  1. Create the directory lushuixi-ui and open the directory

  2. NPM init to generate a package.json file

  3. Building a directory structure

  • Packages Directory of component packages
  • SRC Source directory
  • Scripts Script execution directory
  • README.md
  • package.json
  1. Create a button component in the Packages directory
  • Create a button directory
  • Create a button/SRC/button. Js
  • Create a button/index. Js
/ / version 1.0.0
// button/index.js

 import Button from './src/button';


/* istanbul ignore next */

// Call intall on the component when vue.use (Button)

Button.install = function (Vue) {

    // Globally register components

    React Differs from vue in that vue components must be registered (either globally or locally).

    Vue.component(Button.name, Button);

};
export default Button;
Copy the code

Note:

  • Here because the vue registered components, there are two ways to define components name [kebab – case (dash separating) | PascalCase (capitalize the first letter naming) 】
  • When registering a component, when defining a component using kebab-case, reference to that component must also use kebab-case
  • When registering components, when defining a component using PascalCase, you can refer to the component either using PascalCase or kebab-case (although only kebab-case is valid when used directly in the DOM (that is, a template that is not a string)
  • When using the Element-UI plug-in, we refer to the component by… Form is defined by ElButton when the component is registered
  • So, this is modified as follows
/ / version 1.0.1
// button/index.js
import LsxButton from './src/button';


/* istanbul ignore next */

Call intall on the component when vue.use (LsxButton)

LsxButton.install = function (Vue) {

    // Globally register components

    React Differs from vue in that vue components must be registered (either globally or locally).
    // the value lsxbutton. name is LsxButton
    //./ SRC /button.vue export default {name: LsxButton}

    Vue.component(LsxButton.name, Button);

};

export default LsxButton;
Copy the code
  1. Entry file SRC /index.js
/ / version 1.0.0
import Button from '.. /packages/button';


const components = [

    Button,

]


// Globally register components

Install is called when vue.use (plug-in) is used

const install = function (Vue, opts = {}) {

    components.forEach(component= > {

        Vue.use(component.name, component);

    });

}


export default {

    install,

    Button,

}
Copy the code

There’s a little bit of caution here

  • Vue components must be imported and registered before being used. Use global registered components (vue.use (component.name, Component) when writing Vue plug-ins.
  • There are two ways to import components in this plug-in, on-demand (vue.use (Button), where the button.install method is called to register the component) and global import (vue.use (plug-in name), where install of the plug-in is called to register all child components)

Correction:

/ / version 1.0.2
import Button from '.. /packages/button';


const components = [

    Button,

]


// Globally register components

Install is called when vue.use (plug-in) is used

const install = function (Vue, opts = {}) {

    components.forEach(component= > {

        Vue.component(component.name, component);

    });

}


export default {

    install,

    Button,

}
Copy the code

2. Send the package to NPM

  1. If you do not have an NPM account, register with NPM first

  2. If it is the first publication, NPM addUser enters the user name, password, and email account

  3. If it is not the first release, NPM login is used

  4. Next, NPM publishes the packet

  5. Go to NPM’s Packages to view the delivered packages

Note: the package is sent repeatedly. If the version number is the same, an error will be reported. Therefore, update the version number every time you send a package

Three, use the package

  1. Vue create hello-wrold, set up vUE project, select vUE version 2.x, and install dependencies

  2. Download the package using the NPM I plug-in name

  3. SRC /main.js imports the plug-in

import Vue from 'vue'
import App from './App.vue'
import LushuixiUi from 'lushuixi-ui';

// Global import component
Vue.use(WeizhiUi)
Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

Note: There are two ways to import components

  • Global import
  • According to the need to import
  1. Global import plugin in app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <lsx-button></lsx-button>
  </div>
</template>
Copy the code

Note:

  • The component was not registered or failed to be registered
  • I use here is all the components in the global import plug-in, so to check the SRC/index, js the install method, error is found in the component registration that piece of code, you should use Vue.com ponent (component, the component itself) instead of Vue. Use (component, the component itself), write wrong, My god! Modified version 1.0.2
  1. Here you use the entire global import plug-in, followed by components from the on-demand import plug-in
import Vue from 'vue'
import App from './App.vue'
import LushuixiUi from 'lushuixi-ui';

Vue.config.productionTip = false
// Vue.use(LushuixiUi)
Vue.use(LushuixiUi.Button)

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

SRC /index.js is an import file with export default. It is an object that cannot be imported by import {} from ”. So why can element-UI be imported on demand in this way (import {Button} from ‘lushuixi-ui’ directly; Vue.use(Button)?

When using the element-UI plugin, you actually call the js file in the lib directory where the final code is packaged as required by the babel-plugin-component plugin. Webpack configuration into multiple entry to ensure that the final package directory structure accord with the requirement of Babel – plugin – component plug-ins, achieve on-demand loading (refer to the problem: segmentfault.com/a/119000001…