怎樣搭建前端公共vue元件庫

前言

在開發過程中，我們的頁面十分複雜，需要每個組員獨立開發一個功能，最後在進行鬥胡。這就需要一個公共的元件庫，讓每個人都可以使用共同的元件來加速開發，提高開發效率。

Vue.js 作為當下最火熱的前端框架之一，在國內外都有很多企業採用。因此，在實踐中，如何搭建一套適合自己公司的 Vue.js 元件庫，會成為許多需要框架的團隊的必修課。

這篇文章將帶領大家一步一步搭建一個適合自己公司的 Vue.js 元件庫，供大家參考。

一、元件庫搭建

Vue 元件是一種抽象的概念，就是將介面一些複雜的DOM 結構和樣式封裝成一個獨立的元件，讓多個介面都可以引用它，處理各自的業務邏輯。

1. 確定元件庫技術方案

在建立元件庫之前，我們要確定元件庫的技術方案，常見的有兩種：透過第三方函式庫引入元件和自主開發組件。

透過第三方函式庫引入元件，可以利用第三方元件庫提高開發效率和維護成本，缺點是需要符合第三方元件庫的規範，靈活性相對較差。

自主開發元件，可以自由自訂元件庫，符合公司的規範，但是需要在開發、維護和更新上付出更大的精力。

根據實際情況，我們選擇自主開發元件，方便管理和維護。

2. 初始化專案

使用 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 ，用於整個元件庫的樣式控制。

3. 開發元件

在 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 屬性，讓目前元件的樣式不影響其他元件。

4. 註冊元件

註冊元件的方式主要有兩種：全域註冊和局部註冊。

全域註冊可以讓我們在任何地方引用元件，局部註冊只能在目前元件內使用。當然，為了管理方便，我們都會在一個專門的文件裡進行元件的註冊。

在專案入口檔案 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 來下載和使用我們的元件庫。

1. 設定打包指令

在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 資料夾下。

2. 自訂打包配置

為了讓打包出來的元件更適合使用，我們需要在專案根目錄下新建一個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 進行忽略。

3. 元件庫發布

執行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中文網其他相關文章！