一、目标
1、把以前vue.js項目中用到的功能抽象成獨立的vue元件；
2、在github上開源出來，并搞清楚npm釋出元件的流程，釋出第一款js元件；
注意：如果你還不清楚vue和npm，需要先看下Vue.js實戰——架構搭建_2。
二、步驟
1、搞清楚github.com開源和npmjs開源的差異。經過一番探索，發現二者的異同點如下：
1）https://www.github.com是儲存源碼的開源平台，主要功能是提供源碼，友善大家學習提高，并一起對項目進行優化改良（包括拉分支）；
2）https://www.npmjs.com是儲存開源的元件平台，主要功能是提供元件，比如在shell指令中執行npm install xxx安裝元件到本地項目中，在npmjs平台中通常會保留該元件的github位址，友善大家對該元件進行學習、優化和改進；
3）github和npmjs這2個平台互相獨立，二者均需上傳項目代碼，隻不過npmjs上可以是編譯之後的元件代碼；
4）github和npmjs項目的根路徑下都有package.json檔案，二者的意義不同，内容也完全不一樣，是以需要各自建項目并獨立釋出。
2、標明之前項目中的ToggleSwitch開關元件作為開發目标。
我需要從原先的項目中先抽取出相關功能，并進行改進，保證元件有較好的可擴充性。
ToggleSwitch元件開發過程如下：
1）參考了多個開源元件，确定項目目錄結構如下：
從上往下，框中的3部分分别代表樣例區、元件源碼區和webpack配置區；
2）在demo.vue中引用元件時，還是按照vue本地檔案路徑的方式引用vue檔案：引用方式相同的示例如下（參見geolocation_1/src/App.vue源碼）：
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
3）ToggleSwitch功能驗證OK後，先送出至github源碼托管平台（vue-toggle-switch源碼），此時元件并沒法被别人的項目引用到；
4）開始在npmjs平台上釋出我們的vue-toggle-switch插件。前面說過，npmjs由于package.json檔案和github上不同，是以需要重建立1個npm工程路徑：
a、建立npmjs-vue-toggle-switch工程目錄，進入并執行npm init；
b、逐漸完善package.json資訊如下：
{
"name": "vue-multi-toggle-switch",
"version": "1.0.9",
"description": "toggle-switch component of Vue.js",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"vue": "^2.5.11"
},
"deprecated": false,
"devDependencies": {
},
"repository": {
"type": "git",
"url": "git+https://github.com/woollay/vue-toggle-switch.git"
},
"keywords": [
"vue.js",
"switch",
"toggle",
"toggle-switch"
],
"author": "woollay",
"license": "MIT",
"bugs": {
"url": "https://github.com/woollay/vue-toggle-switch/issues"
},
"homepage": "https://github.com/woollay/vue-toggle-switch#readme"
}
c、編寫npm元件的入口index.js：
import Vue from 'vue'
import ToggleSwitch from './components/ToggleSwitch.vue'
const plugin = {
install(Vue, options) {
Vue.component('ToggleSwitch', ToggleSwitch)
}
}
export default plugin
d、把github上釋出的代碼（除了package.json）全部搬至此工程，目錄結構如下：
e、在npmjs官網上新增賬號。注冊成功後，一定記得先從郵箱激活該賬号；
f、執行登入指令：npm login，并輸入使用者資訊進行認證；
g、登入成功後，執行指令：npm publish，把項目釋出到npmjs平台；
注意：如果提示如下報錯：
npm ERR publish 403
You do not have permission to publish '...
說明該項目名已經被别人給占用，隻能另取它名。比如我在github上的工程名為vue-toggle-switch，但在npmjs上發現送出不了，但是搜又搜不到這個元件，懷疑是被人使用，并設為私有所緻。後來我在package.json中把元件名改為：vue-multi-toggle-switch後，就成功了。
h、版本釋出到npmjs後，如果後續需要更新，就需要先執行指令：npm version patch使版本号+1，然後再執行npm publish重新釋出；
5）在npmjs平台釋出成功後，就需要在github的vue-toggle-switch根路徑下執行：npm i vue-multi-toggle-switch把最新的版本安裝到本地，同時修改為引用第三方元件的方式來引用。
demo.vue引用第三方元件的代碼如下：
import ToggleSwitch from "vue-multi-toggle-switch";
import Vue from "vue";
Vue.use(ToggleSwitch);
6）在github平台上驗證通過後，把npmjs工程的最新源碼和配置代碼（除了package.json）全部覆寫至github上，包括README.md（此檔案的編寫請自行搜尋MarkDown的使用，此處略），元件才算是完成了。
元件效果如下：
7）如果你對上述的過程描述還不明白，請參考github上的vue-toggle-switch和npmjs上的vue-multi-toggle-switch，對照着再看下上述過程，如還有疑問，歡迎留言或者郵件交流。
三、總結
1、在開發元件前，我自以為對經常使用的github和npmjs平台比較了解，心想開發個元件應該沒有多難，實際卻耗費了将近2天的時間，後續還需要多深入使用，多總結；
2、開發并釋出一個元件的過程還是比較繁瑣的，尤其是保證github和npmjs平台上二者源碼一緻。這裡再簡單概述下流程：
1）在github上開發元件功能，驗證通過後送出至github平台；
2）重建立npmjs上元件，并複制上一步中的元件功能的代碼（除了package.json）；
3）npmjs釋出成功後，修改github上源碼demo引用元件的方式：本地引用改成安裝第三方元件後，再使用；
4）上一步驗證通過後，再把github上修改過的demo代碼覆寫至npmjs項目中，并更新npmjs項目版本後釋出；
5）更新github上引用npmjs上元件的版本，再次送出至github平台，此時二者源碼才幾乎一緻。
3、限于篇幅，本次隻是介紹了怎麼開源一個ToggleSwitch元件，元件的源碼解析留待下回分享。
四、參考資料
[1] https://blog.csdn.net/zdhsoft/article/details/79691416
[2] https://github.com/wangdahoo/vue-scroller
[3] https://github.com/wangdahoo/vonic
[4]https://www.npmjs.com/package/vuejs-toggle-switch
上一篇：Vue.js實戰——封裝浏覽器錄音元件_6 下一篇：Vue.js實戰——ToggleSwitch元件介紹_8