Create your own Vue UI component library and publish it on npm

This article is limited to the entry level, not mass production, I hope to help you.

Because the same component may be used in many projects, we update it by copying and pasting, which is clumsy. We can update it by iterating NPM packages after uploading to npm.

preparation in advance

Initialization project

Here we use vue-cli to initialize a Vue project.

npm install -g @vue/cli or yarn global add @vue/cli

vue create personal-component-set

First of all, we will develop a reusable top-bar control. Here we use the vuetifyUI library for the second development.

npm install vuetify or yarn add vuetify

Top Bar Control Code:

src/components/TopBar.vue

<template>
    <v-toolbar>
      <!-- Here v The first use is the third party. ui Component library -->
        <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
        <v-toolbar-title>{{title}}</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="../assets/logo.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 {
  // Accept custom properties passed after componentization
  // Source code connection
  props: ['sourceCodeLink', 'title'],
  methods: {
    openMyGithub() {
      // Create a tag and jump when a custom avatar is clicked
      const a = document.createElement('a')
      a.target = '_blank'
      a.href = 'https://github.com/mufengsm'
      a.click()
    },
    toMainPage() {
      this.$emit('to-main-page')
    }
  }
}
</script>

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

a {
  color: black;
}
</style>

Configuration project

Now let's configure the current project so that it can be published on npm

First, we edit the entry file src/components/index.js, which is used as a UI library to register our Component: automatically in Vue.

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

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

"scripts": {
    "build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js",
  },

Command explanation: --target is packaged as lib repository, the --name project name is personal-component-set, and the entry file is./src/components/index.js.

After running the command, you can see the packaged file in the dist folder. Here we choose to publish our **. common.js * file by default, so we add the main attribute in package.json.

When this property is specified, when we refer to the component library, the file specified in main is loaded by default.

"main": "./dist/personal-component-set.common.js",

Finally, we configure the files attribute in package.json to configure which files we want to publish to npm.

"files": [
   "dist/*",
   "src/*",
   "public/*",
   "*.json",
   "*.js"
 ],

npm release

First go npm official website Register an account and remember to check the email to authenticate the mailbox, otherwise upload will not be successful.

Then open the command line tool npm adduser or npm login in the project and enter your registered username password and mailbox. You can use npm whoami to view the login status.

Before publishing, let's modify the name of the project (be careful not to conflict with the existing project name of npm, you can go to NPM to search first), and recommend the name of the user name / project name of @you registered npm.

Next we can publish our UI component library. Before publishing, we compile it again and let the build file be our latest modification:

npm run build-bundle

We use the following commands to publish our project:

npm publish --access public

Note the version attribute specified in package.json: Every time we update our component library, we need to update version (after all, the code for the same version is different, and it's easy to be confused)

Test use

In this way, we have completed the release of our UI component library. Next, we can use it in any project that needs to use it:

npm install --save @ your registered npm username / project name

The component library is then introduced into index files (such as src/main.js):

import @The username/project name of your npm registry

Next we can use Component in the component library in the template of Vue:

<template>
  <!-- v-app yes vuetify Medium -->
  <v-app id="app">
    <top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
  </v-app>
</template>

If you follow the above tutorial, remember to introduce our third-party ui component library vuetify at the beginning of this article in src/main.js

// Using third-party component libraries
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

Last

After these steps, we have a component library of our own. We can update and publish our new version of the component library at any time.

Projects that depend on this component library can be updated with simple npm commands:)

+++

Reference: https://juejin.im/post/5b54120b5188251967307be4

Tags: Javascript npm Vue JSON Attribute

Posted on Tue, 08 Oct 2019 10:08:19 -0700 by rajsekar2u