How to build a front-end public vue component library

Preface

During the development process, our page was very complex, requiring each team member to independently develop a function, and finally engage in a fight. This requires a public component library so that everyone can use common components to speed up development and improve development efficiency.

Vue.js is one of the hottest front-end frameworks at the moment and is adopted by many companies at home and abroad. Therefore, in practice, how to build a Vue.js component library suitable for your own company will become a required course for many teams that need a framework.

This article will lead you step by step to build a Vue.js component library suitable for your company for your reference.

1. Component library construction

Vue component is an abstract concept, which is to encapsulate some complex DOM structures and styles of the interface into an independent component so that multiple interfaces can reference it. It,handles respective business logic.

1. Determine the technical solution for the component library

Before building the component library, we need to determine the technical solution for the component library. There are two common ones: introducing components through third-party libraries and self-developed components.

Introducing components through third-party libraries can use third-party component libraries to improve development efficiency and maintenance costs. The disadvantage is that it needs to comply with the specifications of third-party component libraries and has relatively poor flexibility.

Self-developed components can freely customize the component library and comply with the company's specifications, but it requires greater effort in development, maintenance and updates.

Based on the actual situation, we choose to develop components independently to facilitate management and maintenance.

2. Initialize the project

Use Vue CLI 3 to quickly build the project skeleton.

    $ vue create my-component-lib
    $ cd my-component-lib

Here we choose manual configuration, using babel, router and vuex.

Next, we add support for less and sass to the project.

    $ npm install less less-loader node-sass sass-loader -D

After installation, we can create a new assets folder under the src folder and add a style file index.less for style control of the entire component library.

3. Develop components

Under the src folder, create a components folder to place the developed components. At the same time, in order to facilitate maintenance and viewing, we can create another index.js file under the component folder. Each component requires a separate folder for management.

Here we write a sample component of HelloWord.vue to demonstrate the development of the component library.

    <template>
      <div class="hello-world">
        <h1>Hello World</h1>
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        message: {
          type: String,
          default: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <style scoped>
    .hello-world {
      font-size: 14px;
      line-height: 24px;
      color: #333;
    }
    </style>

Note: The CSS style of the component needs to add the scoped attribute so that the style of the current component does not affect other components.

4. Registering components

There are two main ways to register components: global registration and local registration.

Global registration allows us to reference components anywhere, while local registration can only be used within the current component. Of course, for the convenience of management, we will register the components in a special file.

Register the component in the project entry file src/main.js:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import HelloWorld from '@/components/HelloWorld'

    Vue.config.productionTip = false

    Vue.component('HelloWorld', HelloWorld)

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

At this point, we can use the HelloWorld component in the project.

    <template>
      <div class="container">
        <HelloWorld message="Welcome to my component library" />
      </div>
    </template>

2. Component library release

After the component library is developed, we need to publish it to npm so that developers can download and use our component library through npm.

1. Configure packaging commands

In the package.json file, add the following command:

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

In the above command, we have customized a The lib command is used to package component libraries, and the files generated after packaging will be placed in the dist folder.

2. Custom packaging configuration

In order to make the packaged components more suitable for use, we need to create a new vue.config.js file in the project root directory and add The following code:

    module.exports = {
      // 组件库名称
      outputDir: 'my-component-lib',
    
      // 配置打包的全局入口组件
      configureWebpack: {
        output: {
          libraryExport: 'default'
        },
        externals: {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
          }
        }
      },
    
      // 配置如何处理一些特殊的 CSS，如全局 CSS 的提取
      css: {
        extract: {
          filename: 'css/[name].css'
        }
      }
    }

Among them, the outputDir parameter represents the packaging output directory; the configureWebpack parameter represents the webpack configuration. You need to set the packaged entry and libraryExport to default, so that when introducing the component library, you only need to import X from 'my-component -lib' is enough, and there is no need to import default from X; the externals parameter represents the webpack configuration, and the imported Vue.js is ignored.

3. Component library release

Execute the npm run lib command to package the component library:

    $ npm run lib

After the packaging is completed, publish it to npm:

    $ npm login
    $ npm publish

In other projects, install the component library through npm install my-component-lib:

    import HelloWorld from 'my-component-lib/components/HelloWorld'

    Vue.component('HelloWorld', HelloWorld)

3. Component library version management

When developing the component library, version management Very important. If we do not manage component library versions, we will have no way to deal with bugs once they are discovered. Moreover, there will inevitably be version iteration issues during the development process. If versions are not managed, it will be very confusing and affect the team's development efficiency.

The version management method is based on Git branch management. Each version corresponds to a branch on Git. During the development process, each branch needs to be developed and tested accordingly, and finally merged into the main branch to release the version. .

4. Conclusion

Through the introduction of this article, I believe everyone already knows how to build a Vue.js component library suitable for their own company, and successfully publish and use it on npm. The development of component libraries is one of the problems that the front-end development team needs to solve. Therefore, we need to flexibly master the relevant knowledge of component library development and management to contribute to the development of the company and itself.

The above is the detailed content of How to build a front-end public vue component library. For more information, please follow other related articles on the PHP Chinese website!