preface

Vue is a set of progressive frameworks for building user interfaces that more and more developers are learning and using. After the author finished teaching you how to build the component system of the front-end team from 0 to 1, many friends want to know how to build the component system based on VUE, so as a supplement to this article, this article summarizes how to build the component library based on VUE.

Although I haven’t engaged in the development of the vue for nearly two years, but have been looking at at ordinary times the vue update and development, the authors have argued that the technical team componentization road is focused on the construction of the infrastructure and modularization design idea, we can adopt different framework implements a similar design, so see the essence through the phenomenon, the thought that counts. This article mainly teaches you how to use Vue-CLI3 to build a component library step by step and publish it to NPM. However, the author believes that the focus is not on the specific way to build the component library, but on the idea and choice of designing the component library.

You will reap

  • Use Vue-CLI3 to build your team’s component library and publish it to NPM
  • Basic knowledge of NPM package sending

The relevant data

  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • A picture shows you how to play vue-Cli3 quickly
  • Summary of actual experience of VUE project

The body of the

This article assumes some knowledge of VUE and familiarity with the vue-CLI3 configuration. First of all, we at the time of building component library, must be clear whether it is necessary to set up, if the project is a one-time or does not exist in different project reusable components, then build component library is not necessary, if exist a number of different project team will use consistent component design specification, then build component library is undoubtedly. Let’s go ahead and implement the building of the component library.

1. Install Vue-cli3 and create a project

First let’s install the necessary toolset for development and create a project:

yarn global add @vue/cli
// Create the project
vue create vui
Copy the code

After we install the dependencies and enter the project to start the service, Vue-CLI3 will automatically show us a default page. Regarding the component library directory structure of VUE, I refer to element to organize it, and you can also design it according to your own team style. First let’s look at the original directory structure:

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js'.template: 'public/index.html'.filename: 'index.html'}},// Extend webPack configuration to add Packages to compilation
  chainWebpack: config= > {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')}}Copy the code

First, change the entry file to main.js under examples, and then add packages to the package compilation task.

2. Write component code

First of all, let’s take a Button component to demonstrate, here only to achieve a relatively simple component, if you want to understand more detailed component design methods and ideas, you can refer to the author’s component design related articles. Create a new directory in the Button directory under Packages, and then put the component source code in the SRC directory:

<template>
  <div class="x-button">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'x-button'.props: {
    type: String}}</script>

<style scoped>
  .x-button {
      display: inline-block;
      padding: 3px 6px;
      background: # 000;
      color: #fff;
  }
</style>
Copy the code

A lot of slot mechanisms will be applied in the design of VUE and React components, such as slot labels in VUE, children in React, etc., so you can pay attention to this section. Let’s write the following code in Button index.js to install it as a component of vue:

// Import component, component must declare name
import XButton from './src'

// Provide an install method for components to be imported on demand
XButton.install = function (Vue) {
  Vue.component(XButton.name, XButton)
}

// Export the component
export default XButton
Copy the code

The component structure of a Button is as follows:

// Import the Button component
import XButton from './Button'

// Component list
const components = [
  XButton
]

// Define the install method to accept Vue as an argument. If use is used to register the plug-in, all components are registered
const install = function (Vue) {
  // Determine whether to install
  if (install.installed) return
  // Iterate over registered global components
  components.map(component= > Vue.component(component.name, component))
}

// Check whether the file is imported directly
if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // The exported object must have install before it can be installed by the vue.use () method
  install,
  // The following is a detailed list of components
  XButton
}
Copy the code

The above install step and export step are very critical, you need to follow the rules, this is one of the vUE component registration rules. Detailed documentation you can see the vUE official website components.

3. Test code

To see the effects of our components, we can import them into main.js under examples, which is essentially a development directory for a project. We just need to import them as follows:

// examples/main.js
import Vue from 'vue'
import App from './App.vue'

// Import the component library
import xui from '.. /packages'
// Register the component library
Vue.use(xui)

Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

This is a global import. As for the import on demand, it can be configured using the Element method. For business components, which are commonly used in projects, global imports are suitable, and for UI libraries, on demand imports may be more suitable.

Then we can use our component in the project:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <x-button type="primary">button</x-button>
  </div>
</template>
<script>
export default {
  name: 'App'.components: {}}</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
Copy the code

The effect is as follows:

4. Configure the package.json file

As a component library, we must write our package.json according to NPM’s rules for sending packages. First, we need to let the scaffold compile our component code and output it to the specified directory.

"scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
  }
Copy the code

Our lib script is used to package component code into the lib directory. The file name begins with the name prefix specified by –name. When we execute the script, we will output something like this:

  • Description Description of the component library
  • Keywords Keywords of the component library
  • License Agreement
  • Repository Specifies the git repository address associated with the component library
  • Homepage indicates the homepage address displayed by the component library
  • Main Main entry address of the component library (the address imported when using the component)
  • Private Specifies the private of the component library. If you want to publish it on the NPM public network, delete this property or set it to false
  • PublishConfig is used to set the address to which the NPM is published. This configuration is critical for the team’s internal NPM server and can be set up as a private NPM repository

There are many configurations that depend on the team’s requirements and specifications, and I won’t give you any examples here. Specific configuration source can refer to the address XUI.

5. Publish to NPM

The method of publishing to NPM is also very simple. First, we need to register with the NPM official website to register an account, and then log in to the console. Finally, we need to execute NPM Publish. The specific process is as follows:

// Compile the component library code locally
yarn lib
/ / login
 npm login
 / / release
 npm publish
 // If the publishing fails and a permission problem is displayed, run the following command
 npm publish --access public
Copy the code

This is what it looks like after release:

import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)
Copy the code

The author briefly mentions the knowledge related to NPM here, you can refer to study.

1.. npmignore Configuration file

The.npmignore configuration file is similar to the.gitignore file. If there is no.npmignore,.gitignore will be used instead of its functionality.

2. Version management of NPM packages

NPM sends packets in the following format: major.minor. Patch. Each part is described as follows:

  • Major indicates the Major version number, which needs to be updated if incompatible API changes are made
  • Minor indicates the Minor version number that needs to be updated when backward compatible functional requirements are made
  • Patch indicates the revision number, which needs to be updated when backward compatibility problems are fixed

The corresponding NPM also provides a script to help us automatically update the version number, as follows:

npm version patch
npm version minor
npm version major
Copy the code

There are more in-depth knowledge such as version tagging and so on, you can also be interested in the research. The component library structure in this article refers to the Element directory organization, or you can directly use the element or other open source component library scaffolding.

The last

Later I will spend a lot of time in the output node and analyse data visualization, in hope to make many friends said I write more interview questions, the author has said before won’t out of the interview related articles, hope everyone more focused on the technology itself of precipitation and accumulation, notice the pattern technology and depth. My time is limited, thank you for understanding ~

If you want to get more project complete source code, or want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome in the public number “interesting talk front end” to join our technical group to learn and discuss together, Explore the boundaries of the front end together.

More recommended

  • Hand-write 8 common custom hooks in 10 minutes
  • Master Redux: Developing a Task Management platform (1)
  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
  • CMS full stack project Vue and React (part 2)