一、目标
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 plugind、把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