A prelude to

Are you facing the same problem as me?

Used to popular UI libraries, if you want to try writing your own component library, what do you do

There are too many repetitive components to develop and maintain on a daily basis

Cross-project components can only be CV large?

.

Before we solve these problems, what is the ultimate goal?

We hope that in a large project, we can decouple a complex scene into independent modules in a friendly way, and then maintain these independent modules to achieve the purpose of fast reuse and componentalization.

That said, we need to do some improvement work for developing component libraries and componentization.

During this period, the author also searched a lot of cases of developing component library, but it seems that they can not achieve special general, think about it or their own hand, which can not only avoid a lot of time waste caused by repeated CV, but also focus on componentization related work, so Nzoth was born.

Nzoth is a basic template framework for quickly building your own VUE component library. It provides a friendly separation between development and testing, giving you the freedom to write component code in Nzoth, as well as the ability to write mock test demo cases to see the usability of components in real time.

The complete code can be found in the warehouse below, ✨ star ✨ ~~

📦 Warehouse address: Vue 2.0 | Vue 3.0

Here is a brief introduction to the use of Nzoth:

🚀 Version Update

Vue 3.0 is already supported! Here’s what you need to upgrade: Vue 3.0

Depend on the support

Vue server +

The installation

First, clone the Nzoth repository with Git:

$ git clone https://github.com/pdsuwwz/nzoth.git
Copy the code

Run the following command and wait for all dependencies to be installed

$ yarn install

# or

$ npm install
Copy the code

Local debugging

Use the following command to start the test case:

$ yarn dev:example

# or

$ npm run dev:example
Copy the code

When this is done, it will automatically pull up the browser and open the link below:

http://localhost:8080/example-page

Let’s take a closer look at how the SRC and example components are rendered on the sample page.

Let’s look at the directory structure:

. ├ ─ ─ Babel. Config. Js# Babel configuration├ ─ ─ the buildBuild package configuration│ ├ ─ ─ utils. Js │ ├ ─ ─ webpack. Config. Js │ └ ─ ─ webpack. Example, js ├ ─ ─ exampleWrite a directory of test cases for a real-time preview of the component library currently under development│ ├ ─ ─ App. Vue │ ├ ─ ─ index. The HTML │ ├ ─ ─ the main, js │ ├ ─ ─ the router. The js │ └ ─ ─ the SRC │ ├ ─ ─ components │ └ ─ ─ views ├ ─ ─ libOutput directory after build (generated after package build)│ ├─ ├─ lib-index.js │ ├─ lib-index.jsCompile a directory of component libraries├── ├─ ├─ ├─ class.htmCopy the code

From this we know that development and testing are separate:

That is, we will develop the component library in SRC and test it in Example

Developing component libraries

The default component library code is located in the/SRC /* directory

A CustomButton.vue test component is built into the Components directory, and you are free to modify it as needed.

Local debugging allows you to view currently developed component library components at any time

All you have to do is get in/example/main.jsThe catalogue will do wellCustomButton.vueRegister as a global component:

import CustomPackage from '@/main'

Vue.use(CustomPackage)
Copy the code

For details, see /example/main.js

Use:

<template>
  <CustomButton
    @click="handleClick('Button 1')"
  >
    Button 1
  </CustomButton>
</template>
Copy the code

💡 The above test code has been written, there is no need to write again, only need to modify according to the requirements.

Building a component library

Once the component library is written, it is ready to build. Use the following command to package and build the developed component library:

$ yarn build

# or

$ npm run build
Copy the code

After the build, you’ll see a lib folder generated in the root directory:

├── ├─ ├─ lib-index.js │ ├─ lib-index.js │ ├─ lib-index.jsCopy the code

This is the core file that will be released to Npm.

Register and log in to the Npm account

First, you need to register your Npm account docs.npmjs.com/creating-a-…

After registration, log in to the Npm account from the terminal:

Username, Password, Email… , just follow the instructions:

$ npm login
Copy the code

🚀 release

Finally, execute the following command to publish, and you are done!

$ npm publish
Copy the code

💡 Precautions

The import mode of components is global registration by default, or can be changed to local registration, just need to destruct the way to import @/main, according to the need of free ~

The imported paths use Webpack aliases, including root, @, example, etc. You can modify the configuration file in /build if necessary

You need to change the version number in package.json every time you release a new version, otherwise it will not be released

The main entry path in package.json corresponds to the output configuration in Webpack

The warehouse address

The complete code can be found in the warehouse below, ✨ star ✨ ~~

📦 Warehouse address: Vue 2.0 | Vue 3.0

Nzoth is a basic template framework for quickly building your own VUE component library