怎样搭建前端公共vue组件库-前端问答-PHP中文网

怎样搭建前端公共vue组件库

WBOY

发布： 2023-05-08 09:24:36

原创

1713人浏览过

前言

在开发过程中，我们的页面十分复杂，需要每个组员独立开发一个功能，最后在进行斗胡。这就需要一个公共的组件库，来让每个人都可以使用共同的组件来加速开发，提高开发效率。

Vue.js 作为当下最火热的前端框架之一，在国内外都有很多企业采用。因此，在实践中，如何搭建一套适合自己公司的 Vue.js 组件库，会成为很多需要框架的团队的必修课。

本篇文章将带领大家一步步搭建一个适合自己公司的 Vue.js 组件库，供大家参考。

一、组件库搭建

立即学习“前端免费学习笔记（深入）”；

Vue 组件是一种抽象的概念，就是将界面一些复杂的 DOM 结构和样式封装成一个独立的组件，让多个界面都可以引用它，处理各自的业务逻辑。

确定组件库技术方案

在搭建组件库之前，我们要确定组件库的技术方案，常见的有两种：通过第三方库引入组件和自主开发组件。

通过第三方库引入组件，可以利用第三方组件库提高开发效率和维护成本，缺点是需要符合第三方组件库的规范，灵活性相对较差。

自主开发组件，可以自由定制组件库，符合公司的规范，但是需要在开发、维护和更新上付出更大的精力。

根据实际情况，我们选择自主开发组件，方便管理和维护。

初始化项目

使用 Vue CLI 3 快速搭建项目骨架。

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

登录后复制

这里我们选择手动配置，使用 babel 、 router 和 vuex 。

接下来，我们为项目添加 less 和 sass 的支持。

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

登录后复制

安装完毕后，我们可以在 src 文件夹下新建一个 assets 文件夹，并添加一个样式文件 index.less ，用于整个组件库的样式控制。

开发组件

在 src 文件夹下，创建 components 文件夹，用于放置已开发的各个组件。同时，为了便于维护和查看，我们可以在组件文件夹下再建立一个 index.js 的文件，每个组件需要一个单独的文件夹来进行管理。

这里我们编写一个 HelloWord.vue 的示例组件，用于演示组件库的开发。

    <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>

登录后复制

注意：组件的 CSS 样式需要添加 scoped 属性，让当前组件的样式不影响其他组件。

注册组件

注册组件的方式主要有两种：全局注册和局部注册。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

全局注册可以让我们在任何地方引用组件，局部注册只能在当前组件内使用。当然，为了管理方便，我们都会在一个专门的文件里进行组件的注册。

在项目入口文件 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')

登录后复制

此时，我们就能在项目中使用 HelloWorld 组件了。

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

登录后复制

二、组件库发布

组件库开发完成之后，我们需要将其发布到 npm 上，让开发者能够通过 npm 来下载和使用我们的组件库。

配置打包命令

在 package.json 文件中，新增以下命令：

    "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"
    }

登录后复制

在上述命令中，我们自定义了一个 lib 命令用于打包组件库，打包后生成的文件会放在 dist 文件夹下。

自定义打包配置

为了让打包出来的组件更加适合使用，我们需要在项目根目录下新建一个 vue.config.js 文件，并添加以下代码：

    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'
        }
      }
    }

登录后复制

其中，outputDir 参数表示打包输出目录； configureWebpack 参数表示 webpack 配置，需要将打包的 entry 和 libraryExport 设置为 default，让组件库引入时只需要 import X from 'my-component-lib' 即可，而不需要再从 X 中 import default； externals 参数表示 webpack 配置，对引入的 Vue.js 进行忽略。

组件库发布

执行 npm run lib 命令，打包组件库：

    $ npm run lib

登录后复制

打包完成后，发布到 npm 上：

    $ npm login
    $ npm publish

登录后复制

在别的项目中，通过 npm install my-component-lib 来安装组件库：

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

    Vue.component('HelloWorld', HelloWorld)

登录后复制

三、组件库版本管理

在开发组件库时，版本管理非常重要。如果我们不对组件库版本进行管理，那么一旦发现 bug，我们就会无从下手。而且，在开发过程中难免会有版本迭代的问题，如果不对版本进行管理也会非常混乱，影响团队的开发效率。

版本管理的方式是基于 Git 分支管理的，每个版本在 Git 上对应一个分支，开发过程中每个分支需要进行对应的开发和测试，最终再合并到主分支，发布版本。

四、结语

通过本文的介绍，相信大家都已经知道如何搭建一个适合自己公司的 Vue.js 组件库，并成功在 npm 上发布使用。组件库的开发是前端开发团队需要解决的问题之一，因此，我们需要灵活掌握组件库开发和管理的相关知识，为公司和自身的发展做出贡献。

以上就是怎样搭建前端公共vue组件库的详细内容，更多请关注php中文网其它相关文章！