Build vUE component library

1. Initialize NPM

NPM init -y is executed in the project folder. The directory structure is as follows:

Project -- -- -- -- -- -- -- -- -- -- - / / project folder name └ ─ package. The json - / / NPM configuration fileCopy the code

2. Initialize the directory structure

Create three folders, build, Packages, styles, and an index.js file.

Project -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─ build -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder ├ ─ index. The js -- -- -- -- -- -- -- -- / / entry documents ├ ─ package. The json - / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- / / component folder └ ─ styles -- -- -- -- -- -- -- -- -- -- / / component style folderCopy the code

Configure the common WebPack configuration

Create a new webpack.base.js file in the build folder.

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ └ ─ webpack. Base. Js - / / webpack public configuration ├ ─ index. Js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├ ─ package. The json -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder └ ─ styles --------------- // Component styles folderCopy the code

Write the following configuration:

const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  module: {
    rules: [{test: /\.vue$/.loader: 'vue-loader'}, {test: /\.js$/.loader: 'babel-loader'.exclude: /node_modules/}, {test: /\.css$/.loaders: [{loader: 'style-loader'}, {loader: 'css-loader',}],}, {test: /\.(gif|jpg|png|woff|svg|eot|ttf)\?? . * $/.loader: 'url-loader? limit=8192'},],},plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new VueLoaderPlugin(),
  ],
}
Copy the code

All configuration above are just some commonly used loader, and USES a webpack optimized packaging plug-in new webpack. Optimize. ModuleConcatenationPlugin (), the plug-in USES is the official explanation.

One of the trade-offs in webpack packaging in the past was to package individual modules in bundles into closures. These packaging functions make your JavaScript process more slowly in the browser. In contrast, tools like Closure Compiler and RollupJS can hoist or precompile all modules into a Closure to speed up the execution of your code in the browser.

The above configuration requires the following NPM packages to be installed:

npm i -D webpack webpack-cli vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env style-loader css-loader url-loader
Copy the code

Since babel-loader is installed, you need to create a.babelrc configuration file.

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ └ ─ webpack. Base. Js - / / webpack common configuration ├ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├ ─ package - lock. Json -- / / package. Json Snapshots of the installed package ├ ─ package. Json -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder └ ─ styles -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component style folderCopy the code

Write the following configuration:

{
  "presets": [
    "@babel/preset-env"]}Copy the code

Write two crude components

  • Create a Button component and a link component.

  • The directory structure is as follows:

    Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ └ ─ webpack. Base. Js - / / webpack common configuration ├ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├ ─ package - lock. Json -- / / package. Json Snapshots of the installed package ├ ─ package. Json -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder │ ├ ─ button -- -- -- -- -- -- -- -- -- -- -- -- -- / / button component │ │ ├ ─ index. Js │ │ └ ─ SRC │ │ └ ─ main. Vue │ └ ─ link -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / link component │ ├ ─ index. The js │ └ ─ SRC │ └ ─ main. Vue ├ ─styles --------------- // Component styles folderCopy the code

  • The component’s directory structure borrows from Element-UI to make it easy for WebPack to be packaged as an on-demand structure.

  • Button code is as follows:

    // packages/button/src/main.vue
<template>
  <button class="my-button">Click</button>
</template>

<script>
export default {
  name: 'MyButton',
}
</script>
Copy the code
    // packages/button/index.js
import Button from './src/main.vue';

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

export default Button;
Copy the code

  • The link code is as follows:

    // packages/link/src/main.vue
<template>
  <a class="my-link">Link</a>
</template>

<script>
export default {
  name: 'MyLink',
}
</script>
Copy the code
    // package/link/index.js
import Link from './src/main.vue';

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

export default Link;
Copy the code

  • Each component must have a name attribute.

  • Styles are not written inside the Vue file, they are all written separately in the Styles folder.

  • The button style:

    // styles/button.less
.my-button {
  background: yellowgreen;
}
Copy the code

  • The link style:

    // styles/link.less
.my-link {
  color: blueviolet;
}
Copy the code

  • Entry file index.js compiled:

    // index.js
import Button from './packages/button/index.js';
import Link from './packages/link/index.js';

const components = [
  Button,
  Link,
];

const install = function (Vue, opt = {}) {
  components.forEach(component= > {
    Vue.component(component.name, component);
  });
};

if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Button,
  Link,
};
Copy the code

    Import written components and add install methods for each component so that components can be registered using vue.use ().

5. Configuration fully introduces webPack configuration

Directory structure:

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ ├ ─ webpack. Base. Js - / / webpack common configuration │ └ ─ webpack. Prod. Js - / / total quantity packaging webpack configuration ├ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├─lib │ ├─ ├─ download. json ---- // ├─package.json --------- // NPM ├─packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder │ ├ ─ button -- -- -- -- -- -- -- -- -- -- -- -- -- / / button component │ │ ├ ─ index. The js │ │ └ ─ SRC │ │ └ ─ main. Vue │ └ ─ the link -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / link component │ ├ ─ index. The js │ └ ─ SRC │ └ ─ main. Vue └ ─ styles -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component style folder ├ ─ button. The less └ ─ link. LessCopy the code
// build/webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.js');

module.exports = merge(webpackBaseConfig, {
  mode: "production".entry: {
    main: path.resolve(__dirname, '.. /index.js'),},output: {
    path: path.resolve(__dirname, '.. /lib'),
    publicPath: '/lib/'.filename: 'index.js'.library: 'my-library'.libraryTarget: 'umd'.umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue'.commonjs: 'vue'.commonjs2: 'vue'.amd: 'vue'}}});Copy the code

Here we use webpack-merge, a tool that requires NPM installation, which mainly merges webPack configuration in an append form.

npm i -D webpack-merge
Copy the code

The loader configuration in webpack.base.js is merged with the loader configuration in webpack.base.js, setting the import file and output file path, and packaging in umD mode, setting the vue as an external dependency, no need to package into the output file.

Configure the package.json script again and add a package command.

{
  "name": "my-library"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build:prod": "webpack --config build/webpack.prod.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.2"."@babel/preset-env": "^ 7.10.2"."babel-loader": "^ 8.1.0"."css-loader": "^ 3.5.3." "."style-loader": "^ 1.2.1." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.9.2"."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-merge": "^ 4.2.2." "}}Copy the code

The console runs NPM run build:prod to complete the package. After the package is completed, there is a lib folder with an index.js file in the folder. This file is the js file of the full component.

After each package, remember to delete the old lib files first, for comparison, there is a webpack plugin that can help to delete the old package files each time, for simplicity, I won’t use it here.

6. Package component style files

The logical code of the component is complete, but the style is not. The style needs to be packaged with gulp. Gulp is easier to package CSS than Webpack, so GULp is selected.

Create a new gen-style.js file in the build folder.

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ ├ ─ gen - style. Js -- -- -- -- -- -- -- / / gulp packaging style configuration │ ├ ─ webpack. Base. Js - / / webpack common configuration │ └ ─ webpack. Prod. Js - / / the whole package Webpack configuration ├ ─ index. Js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├ ─ lib │ └ ─ index. The js ├ ─ package - lock. Json -- / / package. Json snapshots of the installed package ├ ─ package. Json -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder │ ├ ─ button -- -- -- -- -- -- -- -- -- -- -- -- -- / / button component │ │ ├ ─ index. Js │ │ └ ─ SRC │ │ └ ─ main. Vue │ └ ─ link -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / link component │ ├ ─ index. The js │ └ ─ SRC │ └ ─ main. Vue └ ─ styles -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component style folder ├ ─ button. The less └ ─ link. The lessCopy the code

Write the following code:

// build/gen-style.js
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const less = require('gulp-less');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

function buildCss(cb) {
  gulp.src('.. /styles/index.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename('index.css'))
    .pipe(gulp.dest('.. /lib/styles'));
  cb()
}

exports.default = gulp.series(buildCss);
Copy the code

You need to install a few packages. If you don’t like using less, you can replace gulp-less with your preferred preprocessor.

npm i -D gulp gulp-clean-css gulp-less gulp-rename gulp-autoprefixer
Copy the code

In the gen-style.js file, there is a buildCss method that packs the styles/index.less file into a preprocessed index.css file. Gule is configured but we styles don’t have an index.less file. Create it first and write some code.

// styles/index.less
@import './button.less';
@import './link.less';
Copy the code

This index.less style is used when a component is loaded in full.

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / webpack configuration folder │ ├ ─ gen - style. Js -- -- -- -- -- -- -- / / gulp packaging style configuration │ ├ ─ webpack. Base. Js - / / webpack common configuration │ └ ─ webpack. Prod. Js ├ ─ index, js -- -- -- -- -- -- -- -- -- -- -- -- -- / / entry documents ├ ─ package - lock. Json -- / / package. Json snapshots of the installed package ├ ─ package. The json -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder │ ├ ─ button -- -- -- -- -- -- -- -- -- -- -- -- -- / / button component │ │ ├ ─ index. The js │ │ └ ─ SRC │ │ └ ─ main. Vue │ └ ─ the link -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / link component │ ├ ─ index. The js │ └ ─ SRC │ └ ─ main. Vue └ ─ styles -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component style folder ├ ─ button. The less ├─index.less --------- // Full load style ├─ link.lessCopy the code

The package.json file adds a package-style command.

{
  "name": "my-library"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build:style": "gulp --gulpfile build/gen-style.js"."build:prod": "webpack --config build/webpack.prod.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.2"."@babel/preset-env": "^ 7.10.2"."babel-loader": "^ 8.1.0"."css-loader": "^ 3.5.3." "."gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-clean-css": "^ 4.3.0"."gulp-less": "^ 4.0.1." "."gulp-rename": "^ 2.0.0." "."style-loader": "^ 1.2.1." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.9.2"."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-merge": "^ 4.2.2." "}}Copy the code

Use the NPM run build:style command to try style packing and pack normally.

7. Load packaging on demand (component logic/style packaging)

After the full load is complete, the packaging configuration is loaded on demand. First configure the packaging of the logical part of the component, and also use webPack for packaging.

Create a new webpack.component.js file and a component. json file in the build folder.

Project -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / project folder name ├ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / Babel configuration file ├ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / Webpack configuration folder │ ├ ─ components. Json -- -- -- -- -- -- -- -- -- / / component path file │ ├ ─ gen - style. Js -- -- -- -- -- -- -- -- -- -- -- -- / / gulp packaging style configuration │ ├ ─ webpack. Base. Js -- -- -- -- -- -- -- -- -- / / webpack common configuration │ ├ ─ webpack.com ponent. Js - / / on-demand loaded pack configuration │ └ ─ webpack. Prod. Js ├ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / Entry documents ├ ─ package - lock. Json -- -- -- -- -- -- -- -- - / / package. Json snapshots of the installed package ├ ─ package. The json -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / NPM configuration file ├ ─ packages -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component folder │ ├ ─ button -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / button component │ │ ├ ─ index. The js │ │ └ ─ SRC │ │ └ ─ main. Vue │ └ ─ the link -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / link component │ ├ ─ index. The js │ └ ─ SRC │ └ ─ main. Vue └ ─ styles -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / component style folder ├ ─ button. Less ├ ─ but less -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / the style of the whole quantity loaded when using └ ─ link. The lessCopy the code
// build/components.json
{
  "button": "packages/button/index.js"."link": "packages/link/index.js"
}
Copy the code
// build/webpack.component.js
const path = require('path');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.js');
const components = require('./components.json');

const basePath = path.resolve(__dirname, '.. / ');

let entries = {};

Object.keys(components).forEach(key= > {
  entries[key] = path.join(basePath, components[key]);
});

module.exports = merge(webpackBaseConfig, {
  mode: "production".entry: entries,
  output: {
    path: path.resolve(__dirname, '.. /lib'),
    publicPath: '/lib/'.filename: '[name].js'.chunkFilename: '[id].js'.libraryTarget: 'umd'.umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue'.commonjs: 'vue'.commonjs2: 'vue'.amd: 'vue'}}});Copy the code

The webPack.component.js configuration incorporates the basic configuration, then iterates the component path of components. Json to create a multi-entry webpack configuration, and then uses umD packaging to package each component into a JS file. As with webpack.prod.js, the vue library is not added to the package.

Package. json adds commands to package load on demand.

{
  "name": "my-library"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build:style": "gulp --gulpfile build/gen-style.js"."build:component": "webpack --config build/webpack.component.js"."build:prod": "webpack --config build/webpack.prod.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.2"."@babel/preset-env": "^ 7.10.2"."babel-loader": "^ 8.1.0"."css-loader": "^ 3.5.3." "."gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-clean-css": "^ 4.3.0"."gulp-less": "^ 4.0.1." "."gulp-rename": "^ 2.0.0." "."style-loader": "^ 1.2.1." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.9.2"."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-merge": "^ 4.2.2." "}}Copy the code

Run the NPM run build: Component test package.

To package the on-demand loading styles, simply introduce a component. json file in the gen-style.js file and add a new handling method.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const less = require('gulp-less');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
const components = require('./components.json');

function buildCss(cb) {
  gulp.src('.. /styles/index.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename('index.css'))
    .pipe(gulp.dest('.. /lib/styles'));
  cb()
}

function buildSeperateCss(cb) {
  Object.keys(components).forEach(compName= > {
    gulp.src(`.. /styles/${compName}.less`)
      .pipe(less())
      .pipe(autoprefixer())
      .pipe(cleanCSS())
      .pipe(rename(`${compName}.css`))
      .pipe(gulp.dest('.. /lib/styles'));
  })

  cb()
}

exports.default = gulp.series(buildCss, buildSeperateCss);
Copy the code

Execute the NPM run build:style test package.

At this point, all the packaging configuration is complete and you are ready to start your own component library writing journey. Finally, add a command that does all the commands at once, so that you can wrap them all up with just one command.

{
  "name": "my-library"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build:style": "gulp --gulpfile build/gen-style.js"."build:component": "webpack --config build/webpack.component.js"."build:prod": "webpack --config build/webpack.prod.js"."lib": "npm run build:prod && npm run build:component && npm run build:style"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.2"."@babel/preset-env": "^ 7.10.2"."babel-loader": "^ 8.1.0"."css-loader": "^ 3.5.3." "."gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-clean-css": "^ 4.3.0"."gulp-less": "^ 4.0.1." "."gulp-rename": "^ 2.0.0." "."style-loader": "^ 1.2.1." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.9.2"."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-merge": "^ 4.2.2." "}}Copy the code

Run NPM run lib to complete the package.

8. Release of NPM package

I will only introduce what configuration is necessary for package.json.

{
  "name": "my-library"."version": "1.0.0"."description": ""."main": "lib/index.js"."files": [
    "lib"]."scripts": {
    "build:style": "gulp --gulpfile build/gen-style.js"."build:component": "webpack --config build/webpack.component.js"."build:prod": "webpack --config build/webpack.prod.js"."lib": "npm run build:prod && npm run build:component && npm run build:style"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.2"."@babel/preset-env": "^ 7.10.2"."babel-loader": "^ 8.1.0"."css-loader": "^ 3.5.3." "."gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-clean-css": "^ 4.3.0"."gulp-less": "^ 4.0.1." "."gulp-rename": "^ 2.0.0." "."style-loader": "^ 1.2.1." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.9.2"."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-merge": "^ 4.2.2." "}}Copy the code
  • nameIs the name of the bag, if that name has been associatednpmOn the repeat, to change their own, otherwise it is not released.
  • versionEach release requires a revision of the version number.
  • mainThe entry is set tolib/index.jsThe path can also be modified according to the name of your package.
  • filesSettings uploadnpmMake sure you have your files or folders packedlibFile upload, other optional.

The above four are must pay attention to, other search to see what the effect is looking at change.

9. Use component libraries

  1. Install your own component library

    npm i [name]
Copy the code

  2. Full amount into

    import MyUI from 'MyUI';
import "MyUI/lib/styles/index.css";

Vue.use(MyUI);
Copy the code

    MyUI is the name of the publishing NPM package.

  3. According to the need to introduce

    Install babel-plugin-component first:

    npm install -D babel-plugin-component
Copy the code

    Configure the.babelrc file

    {
  "presets": [["@babel/preset-env",
      {
        "modules": false}]],"plugins": [["component",
      {
        "libraryName": "MyUI"."libDir": "lib"."styleLibrary": {
          "name": "styles"."base": false."path": "[module].css"}}]]}Copy the code

    If your package has the same directory structure as mine, change the libraryName in order.

    Using components:

    import { Button, Link } from 'MyUI';

Vue.use(Button);
Vue.use(Link);
Copy the code

Refer to the article

How to build a VUE component library