This article will introduce how to wrap a Vue UI component library based on the Vue CLI command-line tool. I have previously written a file for configuring a React UI component from scratch in the React version, so if you are interested, you can take a look. Encapsulate the React UI component library from scratch and publish it to NPM.

1. Install Vue CLI

Cnpm I @ vue/cli-g

Use the vue --version command to check whether the installation is successful.

2.Create a project quickly

Vue create zswui-v

3.Create a new packages component source folder

• Create a packages folder in the zswui-v root directory to store our component source code.
• Create a new index.js file unified export component under the packages folder.

4.Example

Take encapsulating a Button button as an example:

• Create a new button folder.
• Create a new index.js file under the button folder in the previous step as an export of the Button component.
• Create a new src/button.vue src/button.less under the button folder.

So far, the directory files are as follows:

Packages-component source package
|-- button-Button component
    |-- src-Button source folder |
        |   |——button.less              —————————————Button component style file
        |   |——button.vue               —————————————Button Component source code
        Index.js-Button component export file
    index.js
Public
Src
.gitigore
babel.config.js
package.json
READEM.md

Source code display:

// button/src/button.less
. winyh-button {
Color: pink
}


// 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>



// button/index.js
Import Button from ". / src/button"

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

Export default Button

Export in component set

Import Button from ". / button"
Import Input from ". / input"

// A collection of components for traversing
Const components = [Button, Input]

Console.log ({components})

// define install method
Const install = function (Vue) {
  If (install.installed) return
  // traversing the registered global component
  Components.map ((component) = > Vue.component (component.name, component))
}

// determine whether the file is imported directly
If (typeof window! = = "undefined" & & window.Vue) {
  Install (window.Vue)
}

Export {
  Install
  Button
  Input
}

Export default {
  Install
  Button
  Input
}

Script configuration

// package.json file source code
{
  "name": "zswui-v"
  "version": "0.0.1"

  "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-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-template-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"
  ]
}

Key description

Npm run lib

This command generates a lib folder that packages all the components. Then npm publish publishes it to the npm repository.

Npm run pack

This command generates a .tgz file locally. Execute the cnpm I / path/to/xxx.tgz file to install, and test your packaged component library locally.

Global introduction of components

Cnpm I zswui-v-- save


Import zswuiv from "zswui-v"
Vue.use (zswuiv)
// you can reference it in the component.
<Button></Button>

Components are loaded on demand

Plug-ins need to be installed first.

Cnpm I babel-plugin-import-- save-dev

Create a new .babelrc file in the root directory of the project where the component library is introduced, and configure it as follows:

{
  "plugins": [
    [
      "import"
      {
        "libraryName": "plglib", / / component name
        "libraryDirectory": "packages" / / component source package name
      }
    ]
  ]
}

Introduce Button on demand in components

<tempalte>
<div>
    <Button>winyh</Button>
    <p>zswui-v Component library</p>
    </div>
</tempalte>

Import {Button} from "zswui-v"

Export default {
Components: {
    Button
    }
}