preface

For daily development with Vue, we often use open source UI libraries such as Element-UI, Vuetify, etc.

These libraries can be easily introduced into our current project with a single command:

npm install vuetify
// or
yarn add vuetify
Copy the code

But what about when we develop a UI Component ourselves that needs to be used in multiple projects? The first thing we might think of is a straight copy of the past, right?

This is convenient, but there are two problems:

  • When the Component needs to be updated, we need to manually maintain all updates that use the Component
  • Manual copying is cumbersome when multiple Components need to be shared

So why don’t we release a UI component library for our own use?

In this article, I will show you how to create and publish your own Vue UI component library step by step.

Initialize the project

Here we initialize a VUE project using the official VUe-CLI

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create personal-component-set
Copy the code

Entering our new project, let’s look at the current project file:

Let’s write a simple Vue component. Here I’ve written a simple top bar control that displays: the page title, my profile, github source link, etc.

The code is as follows:

<template>
    <v-toolbar>
        <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
        <v-toolbar-title>Visual Explain</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
            <v-btn flat @click="openMyGithub()">
                <v-avatar size=42>
                    <img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4">
                </v-avatar>
                <span style="margin-left:8px;">About me: ssthouse</span>
            </v-btn>
            <v-tooltip bottom>
                <v-btn slot="activator" flat :href="sourceCodeLink">
                    <v-avatar size=42>
                        <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png">
                    </v-avatar>
                    Source Code
                </v-btn>
                <span class="top-bar-tooltip">Welcome to fork & star <br/>;)</span>
            </v-tooltip>
        </v-toolbar-items>
    </v-toolbar>
</template>

<script>
export default {
  props: ['sourceCodeLink'].methods: {
    openMyGithub() {
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = 'https://github.com/ssthouse'
      a.click()
    },
    toMainPage() {
      this.$emit('to-main-page')}}}</script>

<style scoped>
.top-bar-tooltip {
  font-size: 18px;
}

a {
  color: black;
}
</style>
Copy the code

This code forms a very simple Vue component that provides a props: sourceCodeLink for customizing jump links and an Event: to-main-Page callback that triggers the user to jump back to the home page.

The effect is as follows:

Configuration of the project

Let’s configure the current project so that it can be published to NPM.

First we edit the entry file SRC /components/index.js so that it automatically registers our Component in the Vue when imported as a UI library:

import Vue from 'vue'
import TopBar from './TopBar.vue'
const Components = {
  TopBar
}

Object.keys(Components).forEach(name= > {
  Vue.component(name, Components[name])
})

export default Components
Copy the code

Next we add the build project script to the package.json scripts:

Where –name libraryName specifies the name of the Library to publish, we execute the new script above:

As you can see, Build generates various versions of JS files that can be used for publishing

Here we choose to publish our *.common.js file by default, so we add the main property to package.json.

When we specify this property, the files specified in main are loaded by default when we reference the component library.

Finally, we configure the files property in package.json to configure the file path we want to publish to NPM.

Here we put in all the files that the user might use to reference our component library:

NPM release

First we register an NPM account (skip this step if you already have an account)

NPM add user // Enter the user name, email address, etcCopy the code

Then use NPM login to login to the status of the registration number

After login, you can use NPM whoami to view the login status

Before publishing, we will change the name of the project (be careful not to conflict with existing project names) and recommend @username/projectName.

Next, we can publish our UI component library. Before publishing, we will compile again and make the build file with our latest changes:

npm run build-bundle
Copy the code

We publish our project using the following command:

npm publish --access public
Copy the code

Note the version property specified in package.json: every time we update our component library, we need to update version(after all, the same version code is different, which can be confusing).

Test using

This completes the release of our UI component library. We can then use it in any project that needs to use the component library:

npm install --save @ssthouse/personal-component-set
Copy the code

Then import the component library in an index file (e.g. SRC /main.js) :

import '@ssthouse/personal-component-set'
Copy the code

Now we can use the Component library in the Vue template:

<template>
  <v-app id="app">
    <top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
    <router-view/>
  </v-app>
</template>
Copy the code

The last

After these steps, we have a component library of our own. We can always update and release our own new versions of the component library.

Projects that rely on the library can be updated with a simple NPM command:

Interested in data visualization and D3.js?

Here is my D3.js, Github address for data visualization, welcome to Start & fork :tada:

D3-blog

You can also find me here:)

Making the home page

Zhihu column

The Denver nuggets