Introduction (* ❦ omega ❦)

This mind map is also the framework of my article. The Mind map is generated using FeHelper, an open source Chrome plugin. You can access it by following the instructions of the plugin project. Then import the JSON file of my mind map. The JSON file will be placed in the project.

How to prepare for building the VUE NPM component library (those who know can skip it) (゚▽゚)/

Here’s what it takes to build a VUE component library, and what it takes to be a qualified entry-level front-end developer.

  • Editor tools: VsCode download address

The first is to use tools, I personally recommend VsCode, because I feel that the front end is too suitable for this software, all kinds of plug-ins can be used well.

  • Git environment: You can check the information online for git installation, and learn and use it when you install it, as long as you can use collaborative development tools, you need to learn more, as long as you know the basic content of branch development and so on. Then cooperate with github this famous dating website (manual funny) can, mainly used to save their component library code, build component library is not used for the time being, local preservation is mainly afraid of losing, so the cloud backup of a copy is absolutely safe.

  • Node.js environment: No way! No way! No one knows node.js from the front end, okay! The node environment is installed using the NPM package management tool, which is really the soul of the front-end. Node.js download address, installation related to refer to this blog. NRM is recommended to install this package after the completion of the installation, mainly to use it to change the source thief convenient, here suggest to look at this blog (reasonablly strong entrain illicit goods (. – ` ´ omega -)). Here are my Node and NPM versions:

  

  • Vue&vue-cli: Vue is a front-end progressive framework, vue-CLI is a project construction tool, here mainly uses CLI to build a basic component library project, the details will not be explained too much.

  • Register an account: NPM official website, register an account without saying more, prepare an email, and then remember the registration name and password when registering, later release NPM package will use.

  • A little advice: The company asked me to try to build a common component library, mainly because some front-end code reuse rate is high, can extract components can reduce redundancy, at the beginning is also a face of confusion, read a lot of blogs before completing the basic construction process, during the period also read Element source code, of course, it is impossible to completely eat the source code, This is the cameo file with ٩(❛ᴗ❛ danjun) danjun: p. Mainly refer to the file construction structure of the whole project, and then the process of component construction, roughly order the process. Finally, the process of building a component library is really helpful to me, so I suggest you also look at the source code. (o ° omega ° o)

Start building a component library ヾ(≧∇≦*)ヾ

Create project & adjust filename

View the VUe-CLI version

I used the 4+ version of VUe-CLI for the construction project, and there were screenshots before the Node version. It is better to use the 3+ version of CLI. Once you’re done, find a folder to save your project and use CMD to type vue create xd-test-ui to create a project named xD-test-ui

Create a project

CMD: vue create xD-test-ui, press Enter to get to this page. Here I select the vue2 version, and the rest is the default configuration, which is some compilation and spell checking configuration. If you want to learn more, you can learn webpack. Once these configurations are complete, go to the installation page and wait for the project to be created.

  • Configuration options

  

  • The installation process

  • Project creation completed

You can see that after the build is complete, the final prompt is usednpm run serveRun, this is the basic VUe-CLI project, of course this is just the beginning, complete the component library needs to go further"A new man."‘(￣ヮ￣) chrysene. Once the initial look of the project is complete, open the project from the project root directory using VsCode.

Rename folders

See a lot of blogs, we are basically like this to modify, including element source projects, there are examples folder (project examples folder) and packages folder (component folder), so here to follow the flow, will create a good project modified into the following format.

...... | - examples / / SRC directory, change to be examples for example shows | - packages / / new packages for writing storage component... ...Copy the code
  • (SRC ->examples, new packages)

Project configuration Adjustment

Js file in the root directory. The configuration code is as follows. Vue.config. js is an optional configuration file added in vue-cli3. You can see webpack-chain on the webpack-chain configuration page. After you complete these configurations, you can restart the project.

/ / the vue. Config. Js file
const path = require('path')
module.exports = {
    // Modify the pages entry
    pages: {
        index: {
            entry: 'examples/main.js'./ / the entry
            template: 'public/index.html'./ / template
            filename: 'index.html' // Output file}},// Extend the WebPack configuration
    chainWebpack: config= > {
        // @ points to the SRC directory by default
        // You can also add a ~ to refer to Packages
        config.resolve.alias
            .set(The '@', path.resolve('examples'))
            .set('~', path.resolve('packages'))
        // Add packages and examples to the build, since new files are not handled by Webpack by default
        config.module
            .rule('js')
            .include.add(/packages/)
            .end()
            .include.add(/examples/)
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options= > {
                // Modify its options...
                return options
            })
    }
}
Copy the code

Write component φ(>ω<*)

Component directory building

Build the following file directory format, and when you’re done, you can start writing code

| -- - | - packages | | -- index. Js | | - button | | -- index. Js | | - SRC | | - button. The vue | -Copy the code

Directory screenshots so far.

Component coding

  • Button.vue file contents

Here is the individual component file, each package folder is a component, and here is the writing of the basic component style.

<template>
  <div>
    <a :class="type">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <slot></slot>
    </a>
  </div>
</template>

<script>
export default {
  name: "XdButton".props: {
    type: {
      type: String.default: "primary",}}};</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400; 700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5 s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 50px;
}
a:hover {
  background: #03e9f4;
  color: # 050801;
  box-shadow: 0 0 5px #03e9f4.0 0 25px #03e9f4.0 0 50px #03e9f4.0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, # 0005);
}

.warning {
  filter: hue-rotate(300deg);
}

.success {
  filter: hue-rotate(240deg);
}

a span {
  position: absolute;
  display: block;
}
a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%.100% {
    left: 100%; }}a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25 s;
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%.100% {
    top: 100%; }}a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5 s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%.100% {
    right: 100%; }}a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75 s;
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%.100% {
    bottom: 100%; }}</style>
Copy the code
  • Button /index.js content writing

If you want to expose a component, you also need to write a JS file in the component folder that exposes the component

// Import the component. The component must declare its name
import Button from './src/button'

// Provide the install installation method for components to be imported on demand
Button.install = (Vue) = > {
    Vue.component(Button.name, Button)
}

// Export components by default
export default Button
Copy the code
  • Packages /index.js file written

There are two ways to register components. One is to import all components using Use, and the other is to import components on demand, using the same method as elemnet component reference. Only one component has been written so far, so both introductions are the same.

import button from './button'
// Store a list of components
const components = [
    button
]
/* Define the install method that accepts Vue as an argument, and if use is used to register the plug-in, all components will be registered */
const install = (Vue) = > {
    // Determine whether to install it
    if (install.installed) { return }
    // Iterate over all components
    components.map(item= > {
        Vue.component(item.name, item)
    })
}

// Determine Vue initialization
if (typeof window! = ='undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    install,
    button
}
Copy the code

Referencing components within a component library project (for testing components, skip)

In the examples/main. Global registration in js components, and then in the examples/components/HelloWorld. Vue file write use button component.

  • The contents of the main.js file are as follows
import Vue from 'vue'
import App from './App.vue'

import XdUi from '.. /packages/index' // Import components into the component library project
Vue.use(XdUi); // Globally register components

Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code
  • The code in helloWorld.vue is as follows
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <XdButton>default</XdButton>
    <xd-button type="primary">primary</xd-button>
    <xd-button type="warning">warning</xd-button>
    <xd-button type="success">success</xd-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,}};</script>
Copy the code

Here I simply removed some of the default content of the component library project, and then tested the component I wrote in this page, testing it in the project, in case I found errors after uploading the component library and came back to modify it.

  • Component reference effect screenshot

Component packaging

Package. json file writing

  • Name: package name, which is unique. Search for the name on the NPM website, or change the name if it exists.
  • Version: indicates the version number. The version number must be changed each time you release data to NPM. The version number cannot be the same as the historical version number.
  • Description: description.
  • Main: entry file, this field should point to our final compiled package file.
  • Keyword: Separates the final word that you want the user to search for with Spaces.
  • Author: the author
  • Private: indicates whether to publish to NPM. Change the value to false
  • License: Open source agreement

The following Settings are for reference

..."description": "A basic component library based on Vue."."main": "lib/xd-ui.umd.min.js"."private": false."license": "MIT"."scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"."lib": "vue-cli-service build --target lib --name xd-test-ui --dest lib packages/index.js"},...Copy the code

  1. Command lib content parsing compiled into libraries

    • Vue-cli-service build Command used to build the package
    • –target: build target. Default is application mode. Here change to lib to enable library mode.
    • –name: Specifies the compiled component file name.
    • –dest: output directory, change to lib.
    • The last parameter is the entry file, which defaults to SRC/app.vue. Here we specify compile packages/ component library directory.

  2. Illustration after packing

Package command: NPM run lib

NPM official website g ω

It’s finally time to release the official NPM package, but there’s still some work to be done before the release.

  1. Add the. Npmignore file

Uploading to NPM is, of course, just a built lib and a few associated files, so that others can introduce it in a small size and don’t need to fetch extra files, just like uploading to Github doesn’t need the node_modules folder because these things are too big and there’s no need to upload. So add the.npmignore file to the root directory and write folders and files that ignore uploads.

The following is the reference configuration:

Dist # local env files.env.local.env.*. Local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* # Here are the new # to ignore directories and specify files examples/ packages/ public/ vue.config.js babel.config.js *.map *.htmlCopy the code
  1. Log in to the NPM
    • First of all, you need to register an account on NPM, pay attention to verify the email, otherwise it will not be published later.
    • If taobao image is configured, set back to NPM image first.
      • Input on the consolenpm config set registry http://registry.npmjs.org Switch the source
      • Or usenrm use npmOf course need toInstall the NRMI said that before.
    • Then use thenpm loginLog in and enter previously registered information.

    • Finally usingnpm publishRelease package, yay! Remember (゚∀゚) sweet (゚∀゚) Blue finally released the first of their own package. You can see that the package version is0.1.0 from, the subsequent release of the package must be changed to a different version number from the previous one. NPM notifies you of the success of your package by email.

    • Log on to the NPM website to view the packages you have published

At this point we have completed the whole process of publishing the VUE based NPM package, completed the first component library construction, and if you succeed, oh yeah! Congratulations!! If there is no success may be the version or some configuration missing, you can look back, or to reconsider. Here is basically completed component library construction, very tired ah ah ah!!

If only for Sunday (ゝω · ✿ฺ)

Of course, to complete the process, you must create a new project to test whether your package works.

  1. Building a new projectVue create Project name.
  2. usenpm i xd-test-uiInstall the uploaded NPM package.

3. Check whether the check package is installed.

  1. Mount the downloaded components in the new project.
import XdUi from "xd-test-ui" // Import components
import "xd-test-ui/lib/xd-test-ui.css" // It was not introduced in the component library project before, because it is a project and new projects need to import CSS files to have styles.
Vue.use(XdUi); // Globally register components
Copy the code
  1. Write the introduced components within the page
<XdButton>The default</XdButton>
<xd-button type="primary">Specify the default style</xd-button>
<xd-button type="warning">Warning style</xd-button>
<xd-button type="success">Successful style</xd-button>
Copy the code
  1. Results show

Ok, here is a foolproof validation component OK, introduction no problem, NPM component library is completely complete, congratulations, congratulations! \ \ \٩(‘ω’)و// //

✧ plus ⸜(●˙▾˙●) : quality plus

NPM package address

Project address: www.npmjs.com/package/xd-… Use the NPM I XD-test-UI import in your project and then import as above.

Github repository address

Project address: github.com/ZERO-DG/xd-… Download the project using git Clone https://github.com/ZERO-DG/xd-test-ui.git. For a Star

Gitee warehouse address

Project address: gitee.com/zero-dg/xd-… Download the project using git Clone https://gitee.com/zero-dg/xd-test-ui.git.

Refer to the big guy’s blog

Big Brother 0001: www.cnblogs.com/sq-blogs/p/… Big brother 0002: juejin.cn/post/684490… Bosses 0003:www.cnblogs.com/bien94/p/12… Big guy 0004: www.rxshc.com/180.html big guy part of the above order, this blog has part of the place for reference, all from the above blog, thank you big guy!

conclusion

I think an afternoon can make up this blog, suddenly discovered that I was too naive, in a day, but also to work overtime to write, don’t touch the fish is too great, ha ha ha ha < (▰ ˘ ◡ ˘ ▰) >, the process of writing may be a bit hasty, if this blog, content has a typo or incorrect, still hope, correct me, if you feel this blog are helpful to bosses, Remember to give me a thumbs up. ◕ ᴗ ◕.) . Later I will complete the MD file of the online project, and the mind map (brain map) will be uploaded along with the project. All right, that’s it! It’s time to eat ٩(danjun ❛ᴗ❛ danjun) p