# 前言(*❦ω❦) 思維導圖可能有點高糊，有點太大了，專案和導圖檔案放到`github`或`giteee`上，這個思維導圖也是我文章的架構，思維導圖是用[FeHelper](https://github.com/zxlie/FeHelper.git)外掛生成的，這個是一款開源`chrome外掛`，訪問地址按照外掛專案說明安裝即可，然後匯入我的思維導圖的JSON檔案即可,JSON檔案會放在專案中。 

---

# 構建vue npm 元件庫需要準備的事（會的同學可跳過）( ﾟ▽ﾟ)/   這裡主要講一下搭建一個vue元件庫需要事先準備的條件，其實也是一個合格的初級前端開發人員的必備條件。
* **編輯器工具：** [VsCode下載地址](https://code.visualstudio.com/download)   首先是使用工具，個人推薦`VsCode`，因為感覺前端用這款軟體太合適不過了，各種外掛用得好完全可以起飛。
* **git環境：** `git`安裝可以網上查查資料，安裝好邊學邊用就可以了，協同開發工具能用就可，需要深入再學不遲，只要瞭解分支開發等等基礎內容就行了。然後配合[github](https://github.com/)這個著名的交友網站（手動滑稽）就可以了，主要是用來儲存自己的元件庫程式碼，搭建元件庫暫時還用不到，本地儲存主要怕丟失了，所以雲備份一份萬無一失。
* **Node.js環境：** 不會吧！不會吧！不會有人學前端還不知道`Node.js`吧， 好吧！其實我剛開始學也是不知道的，後面也是慢慢接觸到，菜到自閉⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄，安裝`node`環境主要是用`npm`包管理工具，`npm`真是前端人的靈魂。[Node.js下載地址](http://nodejs.cn/download/)，安裝相關可以參考這篇[部落格](https://www.cnblogs.com/lgx5/p/10732016.html)。安裝完成後推薦安裝`nrm`這個包，主要是用它換源賊方便，這裡建議看看這篇[部落格](https://juejin.cn/post/6922024602453426190)（理直氣壯夾帶私貨(。-\`ω´-)）。下圖是我的node版本和npm版本:   
* **vue&vue-cli：** Vue是前端一個漸進式框架，[vue-cli](https://cli.vuejs.org/zh/guide/installation.html)是一個專案構建工具，這裡主要是用cli來構建一個基礎的元件庫專案，具體的細節就不做過多解釋了。 * **註冊npm一個賬號：** [npm官網](https://www.npmjs.com/)，註冊賬號就不用多說了吧，準備好一個郵箱，然後註冊的時候記著註冊名和密碼，後面釋出npm包會使用到。 * **小小建議：** 公司讓我嘗試搭建一個公用的元件庫，主要是前端一些程式碼複用率高，能抽成元件可以減少冗餘，剛開始也是一臉迷茫，翻閱不少部落格後才完成基本的搭建流程，期間也有看過[element](https://github.com/ElemeFE/element)原始碼，當然不可能是完全啃原始碼，主要是[餓了麼](https://element.eleme.cn/#/zh-CN/component/installation)這麼優秀的vue開源ui元件庫不看看原始碼，怎麼對得起天天使用它٩(๑❛ᴗ❛๑)۶。主要是借鑑一下，整個專案的檔案構建結構，然後元件構建的流程，大致能順一下流程。最後再搭建元件庫的過程中也確實對我有一定的幫助，所以建議大家也看看原始碼。(o°ω°o) # 開始搭建元件庫ヾ(≧∇≦*)ヾ ## 建立專案&調整檔名 ### 檢視vue-cli版本   搭建專案我使用的是 **vue-cli的4+** 版本，node版本之前也有截圖，cli最好是用 **3+版本** 。完成這些後，找一個儲存專案的資料夾，然後使用cmd輸入`vue create xd-test-ui`就可以建立名為`xd-test-ui`的專案了
 ### 建立專案   cmd輸入`vue create xd-test-ui`後會來到這個頁面，一路回車預設就可了，這裡我選擇`vue2`版本，剩下的是預設配置，是一些編譯和拼寫檢測的配置，直接預設即可，如果想要深入瞭解，可以學習學習`webpack`，這些配置完成後就進入安裝頁面，等待專案建立完成。 * 配置選項     * 安裝過程     * 專案建立完成   可以看到構建完成後，最後提示使用`npm run serve`執行，這是基礎的vue-cli專案，當然這只是剛開始，完成元件庫還需要進行進一步的`"脫胎換骨"`┐(￣ヮ￣)┌。專案初始樣子完成後，使用VsCode從專案根目錄開啟該專案。     ### 調整資料夾命名   看了很多的部落格，大家基本都是這個樣子來修改的，包括`element`原始碼裡面的專案，也是有`examples`資料夾（專案示例資料夾）和`packages`資料夾（元件資料夾），所以這裡隨大流，將建立好的專案修改成如下的格式。 ``` · ·· ... |-- examples // 原 src 目錄，改成 examples 用作示例展示 |-- packages // 新增 packages 用於編寫存放元件 ... ·· · ``` * 修改檔名前後（src->examples,新增 packages）   ## 專案配置調整 完成上述修改後，專案無法執行，需要調整配置，在 **根目錄** 新增`vue.config.js`檔案，配置程式碼如下，`vue.config.js`是`vue-cli3`新增提供的一個可選配置檔案，相關的配置鏈式操作可以檢視官網的這篇配置介紹 [webpack-chain](https://cli.vuejs.org/zh/guide/webpack.html#%E5%AE%A1%E6%9F%A5%E9%A1%B9%E7%9B%AE%E7%9A%84-webpack-%E9%85%8D%E7%BD%AE)，完成這些配置後項目就可以重新運行了。 ```javascript //vue.config.js檔案 const path = require('path') module.exports = { // 修改 pages 入口 pages: { index: { entry: 'examples/main.js', // 入口 template: 'public/index.html', // 模板 filename: 'index.html' // 輸出檔案 } }, // 擴充套件 webpack 配置 chainWebpack: config => { // @ 預設指向 src 目錄，這裡要改成 examples // 另外也可以新增一個 ~ 指向 packages config.resolve.alias .set('@', path.resolve('examples')) .set('~', path.resolve('packages')) // 把 packages 和 examples 加入編譯，因為新增的檔案預設是不被 webpack 處理的 config.module .rule('js') .include.add(/packages/) .end() .include.add(/examples/) .end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的選項... return options }) } } ``` ## 編寫元件 φ(>ω<*) ### 元件目錄構建 構建如下的檔案目錄格式，然後構建完成後就可以開始寫程式碼了 ``` |—— |——packages | |——index.js | |——button | |——index.js | |——src | |——button.vue |—— ```  目前為止的目錄截圖。 ### 元件程式碼編寫 * **button.vue檔案內容**   這裡就是單個的元件檔案，每個packages下的資料夾就是一個元件，這裡是基礎元件樣式的編寫。 ```html ``` * **button/index.js內容編寫**   如果要暴露元件，還需在元件資料夾內編寫向外暴露元件的js檔案 ```javascript // 匯入元件，元件必須宣告 name import Button from './src/button' // 為元件提供 install 安裝方法，供按需引入 Button.install = (Vue) => { Vue.component(Button.name, Button) } // 預設匯出元件 export default Button ``` * **packages/index.js檔案編寫**   在這裡提供兩種元件註冊方式，一種是使用`use`全部引入，另一種是按需引入元件，使用方法和`elemnet`元件引用方法一樣。目前只寫了一種元件，所以兩種引入的都一樣。 ```javascript import button from './button' // 儲存元件列表 const components = [ button ] /* 定義install 方法，接收Vue作為引數，如果使用use註冊外掛，則所有的元件都將被註冊 */ const install = (Vue) => { // 判斷是否安裝 if (install.installed) { return } // 遍歷所有元件 components.map(item => { Vue.component(item.name, item) }) } //判斷Vue初始化 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { install, button } ``` ### 在元件庫專案內引用元件（測試元件所用，可以跳過）   在`examples/main.js`中全域性註冊元件，然後在`examples/components/HelloWorld.vue`檔案中編寫使用按鈕元件。 * **main.js檔案內容如下** ```JavaScript import Vue from 'vue' import App from './App.vue' import XdUi from '../packages/index' //元件庫專案內引入元件 Vue.use(XdUi); //全域性註冊元件 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` * **在HelloWorld.vue中的程式碼如下** ```html ``` 這裡我只是刪除了一些元件庫專案的預設內容，然後在這個頁面中測試我編寫的元件，在專案內測試，以防上傳元件庫後發現錯誤再折騰回來修改。 * **元件引用效果截圖**  ## 元件打包 ### package.json檔案編寫 * name: 包名，該名字是唯一的。可在 npm 官網搜尋名字，如果存在則需換個名字。 * version: 版本號，每次釋出至 npm 需要修改版本號，不能和歷史版本號相同。 * description: 描述。 * main: 入口檔案，該欄位需指向我們最終編譯後的包檔案。 * keyword：關鍵字，以空格分離希望使用者最終搜尋的詞。 * author：作者 * private：是否私有，需要修改為 false 才能釋出到 npm * license： 開源協議 以下為參考設定 ```json ··· "description": "基於Vue搭建的一個基礎元件庫。", "main": "lib/xd-ui.umd.min.js", "private": false, "license": "MIT", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "vue-cli-service build --target lib --name xd-test-ui --dest lib packages/index.js" }, ··· ``` 1. **編譯為庫的命令 lib 內容解析** * vue-cli-service build 構建包的命令 * --target: 構建目標，預設為應用模式。這裡修改為 lib 啟用庫模式。 * --name：指定編譯後的元件檔名字。 * --dest : 輸出目錄，修改為lib。 * 最後一個引數為入口檔案，預設為 src/App.vue。這裡我們指定編譯 packages/ 元件庫目錄。 2. **打包後圖示說明**  打包命令：`npm run lib` # 上傳到npm官網 罒ω罒   終於到了“雞凍”人心的一步了，釋出正式的npm包，然而到這裡還需要在釋出前做一些準備工作。 1. **新增.npmignore檔案**   上傳到`npm`當然只需要一個構建好的`lib`和相關的幾個檔案就足夠了，這樣別人引入的時候體積小，也不用獲取多餘的檔案，就像上傳到`github`不需要`node_modules`資料夾一樣，因為這些東西太大，而且沒有必要上傳，所以這裡在根目錄新增`.npmignore`檔案，在裡面寫入忽略上傳的資料夾和檔案即可。
以下是參考配置： ``` # 這是複製 .gitignore 裡面的 .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* # 以下是新增的 # 要忽略目錄和指定檔案 examples/ packages/ public/ vue.config.js babel.config.js *.map *.html ``` 2. **登入到npm** * 首先需要到 [npm](https://www.npmjs.com/) 上註冊一個賬號,注意驗證郵箱，不然之後會發布不了。 * 如果配置了淘寶映象，先設定回npm映象。 * 在控臺輸入 `npm config set registry http://registry.npmjs.org ` 切換源 * 或者使用 `nrm use npm` 當然需要[安裝NRM](https://juejin.cn/post/6922024602453426190)，前面說過了。 * 然後使用 `npm login` 登入，輸入之前註冊的資訊。  * 最後使用 `npm publish` 釋出包，好耶！ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ 終於釋出了第一個自己的包了。可以看到包的版本是`0.1.0`，後續再發布包需要修改成和歷史不同的版本號。如果釋出成功，npm會使用郵件通知你，可以在郵箱中檢視到自己的釋出包成功的訊息。  * 登入到npm官網檢視自己釋出的包  到這一步我們就完成了整個基於vue的npm包釋出的流程，完成了第一個元件庫的搭建，如果你成功了，哦耶！恭喜你！！！如果沒有成功可能是版本或者某些配置遺漏了，可以回過頭去看看，或者 **重新來一次ヽ(･ω･´ﾒ)**（不要打我）。到這裡基本就完成了元件庫的搭建，好累啊啊啊！！！ # 新建專案引入安裝自己的npm包測試 ❥(ゝω・✿ฺ) 當然如果要完成整個流程，那肯定得新建專案測試一下自己的包是否能用。
1. 構建新的專案 `vue create 專案名`。 2. 使用 `npm i xd-test-ui` 安裝上傳的npm包。  3. 確認檢查包是否安裝了。
 4. 在新專案中掛載下載好的元件。 ```javascript import XdUi from "xd-test-ui" //引入元件 import "xd-test-ui/lib/xd-test-ui.css" //之前在元件庫專案中沒有引入，因為是一個專案，而新專案需要引入css檔案才會有樣式。 Vue.use(XdUi); //全域性註冊元件 ``` 5. 在頁面內編寫引入的元件 ```html 預設 指定預設樣式 警告樣式 成功樣式 ``` 6. 效果展示    好了，這裡就萬無一失的確認元件ok，引入沒有問題，npm元件庫完全的完成了，可喜可賀，可喜可賀！＼＼\٩('ω')و//／／ # 專案地址✧⁺⸜(●˙▾˙●)⸝⁺✧ ## npm包地址 [專案地址](https://www.npmjs.com/package/xd-test-ui)
在專案中使用 `npm i xd-test-ui` 引入，然後和上述的方法一樣引入即可。 ## github倉庫地址 [專案地址](https://github.com/ZERO-DG/xd-test-ui.git)
使用`git clone https://github.com/ZERO-DG/xd-test-ui.git`下載專案。求個Star ## gitee倉庫地址 [專案地址](https://gitee.com/zero-dg/xd-test-ui.git)
使用`git clone https://gitee.com/zero-dg/xd-test-ui.git`下載專案。 # 參考大佬的部落格 [大佬0001](https://www.cnblogs.com/sq-blogs/p/12822206.html)
[大佬0002](https://juejin.cn/post/6844903953180835847)
[大佬0003](https://www.cnblogs.com/bien94/p/12034249.html)
[大佬0004](http://www.rxshc.com/180.html)
以上大佬部分先後順序，本部落格有部分借鑑的地方，全部來自於以上部落格，感謝各位