<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          如何搭建和發(fā)布一個 Vue 組件庫
          共
                4008字，需瀏覽
                    9分鐘
                
           ·
          2020-08-12 12:14
          
                    

                    

                    
                    
                    

          如今，許多組件庫風(fēng)靡一時，使得我們能夠便捷地保持一個應(yīng)用一致的外觀和體驗。
          我至今已經(jīng)使用過許多不同的組件庫，不過使用組件和深入了解構(gòu)建組件的過程還是有很大不同的。
          我想要更深入地理解組件庫的構(gòu)建過程，也希望能有助于你對于這一過程的理解。
          我們接下來會使用 ?vue-sfc-rollup ?這個 npm 包來構(gòu)建這個組件庫，這是一個非常實用的組件庫構(gòu)建工具。
          如果想用這個工具管理現(xiàn)有的組件庫，可以查看文檔。
          這個工具為我們創(chuàng)建了項目的文件結(jié)構(gòu)，如文檔所說，它創(chuàng)建了以下文件（SFC 即 Single File Component）：
          • 一個最簡的 ?rollup ?配置文件
          • 一個包含 build/dev 腳本和項目依賴的 package.json 文件
          • 一個最簡的用于轉(zhuǎn)譯的 babel.config.js 和 .browserslistrc 文件
          • rollup 打包 SFC 時用到的包裝器（wrapper）
          • 一個 SFC 示例文件
          • 組件庫的使用示例
          這個工具同時支持單文件組件和組件庫，注意文檔中的這句話：
          在 library 模式下有一個 'index' 文件，其中聲明了需要暴露哪些組件到你的庫中。
          也就是說，在設(shè)置過程中會額外生成一些文件。
          開始構(gòu)建
          首先，全局安裝 ?vue-sfc-rollup：
          npm?install?-g?vue-sfc-rollup

          安裝完成后，在命令行窗口進入想要在其中保存項目文件的目錄，執(zhí)行如下命令來初始化項目。
          sfc-init

          在提示中選擇如下選項：
          • Is this a single component or a library? ?Library
          • What is the npm name of your library? ?（名稱在 npm 中必須是唯一的，這里我使用的是 ?brian-component-lib）
          • Will this library be written in JavaScript or TypeScript? ?JavaScript（可以放心地選擇 TypeScript，只要你清楚自己的選擇）
          • Enter a location to save the library files: ?（項目的文件夾名稱，默認為之前步驟設(shè)置的 npm 名稱，所以可以直接按 enter 取默認值。）
          設(shè)置完成之后，進入項目目錄并執(zhí)行 npm install。
          cd?path/to/my-component-or-lib

          npm?install

          完成之后，選擇一個編輯器來打開項目目錄。
          如上所述，在 ?/src/lib-components ?文件夾中可以看到，一個示例 Vue 組件已經(jīng)為我們構(gòu)建好了。要查看效果，可以運行 ?npm run serve ?命令，然后在瀏覽器中訪問 ?http://localhost:8080/。
          開始添加我們的自定義組件。在這個示例中，我打算模擬 freeCodeCamp 的任務(wù)介紹部分的按鈕，所以在 ?lib-components ?文件夾中新建一個名為 ?FccButton.vue ?的 Vue 文件。
          這就是我們將要構(gòu)建的按鈕
          可以直接將下面這段代碼復(fù)制到你的文件中：