How to package a Vue UI component library and load it on demand?

This article describes how to encapsulate a Vue UI component library based on the Vue CLI command line tool. Configure the React UI component from scratch. Package the React UI component library from scratch and publish it to NPM

1. Install the Vue CLI

cnpm i  @vue/cli -g
Copy the code

Run the vue –version command to check whether the installation is successful.

2. Create a project quickly

vue create zswui-v
Copy the code

3. Create the Packages component source folder

• inzswui-vRoot directory creationpackagesFolder to store our component source code
• inpackagesNew folderindex.jsUnified file export component

4. Here’s an example

Take wrapping a Button Button as an example

• Create a newbuttonfolder
• In the previous stepbuttonNew folderindex.jsDocument, asButtonComponent export
• inbuttonNew foldersrc/button.vue src/button.less

The files in this directory are as follows

Packages -- -- -- -- -- --, component source code package | - button -- -- -- -- -- -- - | - the SRC button components -- -- -- -- -- --, the button source folder | | - button. The less -- -- -- -- -- --, the Button component style file | | - Button. The vue -- -- -- -- -- -- - Button component source index. Js -- -- -- -- -- -- -- the Button components export file index. The js public SRC  .gitigore babel.config.js package.json READEM.mdCopy the code

The source code to show

// button/src/button.less
.winyh-button{
	color: pink;
}
Copy the code

// button/src/button.vue

<template>
  <button
    class="winyh-button"
    @click="handleClick"
    :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: "Button".props: {
    disabled: {
      type: Boolean.default: false,}},methods: {
    handleClick(evt) {
      this.$emit("click", evt); ,}}};</script>

<style lang="less" scoped>
@import "./button.less";
</style>

Copy the code

// button/index.js
import Button from "./src/button";

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

export default Button;

Copy the code

Component Set export

import Button from "./button";
import Input from "./input";

// A collection of components for traversal
const components = [Button, Input];

console.log({ components });

// Define the install method
const install = function(Vue) {
  if (install.installed) return;
  // Iterate over registered global components
  components.map((component) = > Vue.component(component.name, component));
};

// Check whether the file is imported directly
if (typeof window! = ="undefined" && window.Vue) {
  install(window.Vue);
}

export {
  install,
  Button, 
  Input,
};

export default {
  install, 
  Button, 
  Input,
};

Copy the code

The script configuration

{"name": "zswUI -v", "version": "0.0.1", "private": false, "main": "lib/zswui-v.common.js", "style": "lib/zswui-v.css", "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "vue-cli-service build --target lib --name zswui-v --dest lib packages/index.js", "pack": "npm run lib && npm pack", "docs:dev": "npx vuepress dev docs", "docs:build": "NPX vuepress build docs", "dependencies": {"core-js": "^3.6.5", "vue": "^2.6.11"}, "devDependencies": {" @ vue/cli - plugin - Babel ":" ~ 4.4.0 ", "@ vue/cli - plugin - eslint" : "~ 4.4.0", "@ vue/cli - plugin - the router" : "^ 4.4.6 @", "vue/cli - service" : "~ 4.4.0", "Babel - eslint" : "^ 10.1.0", "Babel - plugin - component" : "^ 1.1.1 Babel - plugin -", "import" : "^ 1.12.2", "eslint" : "^ 6.7.2", "eslint - plugin - vue" : "^ 6.2.2", "less" : "^ 3.12.2," "less - loader" : "^ 6.2.0", "vue - the template - the compiler" : "^ 2.6.11", "vuepress" : "^ 1.5.2," "script - loader" : "^ 0.7.2"}, "eslintConfig" : {" root ": true," env ": {" node" : true}, "extends" : [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }Copy the code

Emphasizes the

npm run lib

This command generates a lib folder where all the components are packaged. NPM publish then publishes to the NPM repository.

npm run pack

This command generates a.tgz file locally. To install and test your packaged component libraries locally, execute the CNPM I /path/to/xxx.tgz file.

Component global import

cnpm i zswui-v --save
Copy the code

import zswuiv from "zswui-v"

Vue.use(zswuiv)

// The component can be referenced
<Button></Button>
Copy the code

Components are loaded on demand

You need to install the plug-in first

cnpm i babel-plugin-import --save-dev
Copy the code

Create a new. Babelrc file in the project root directory of the imported component library and configure it as follows

{"plugins": [["import", {"libraryName": "plglib", // libraryDirectory": "packages"}]]}Copy the code

Introduce buttons as needed in the component

<tempalte>	
	<div>
    	<Button>winyh</Button>
    	<p>Zswui - v component library</p>
    </div>
</tempalte>

import { Button } from "zswui-v"

export default {
	components:{
    	Button
    }
}


Copy the code

Vue version of the source repository: ZswUI-V

React: Zswui