上篇主要描述了组件功能的开发，本篇将描述如何将开发好的组件变得更人性化并打包发布

所以“正儿八经”主要是指接下来要做的事情。像上篇中那样的组件开发，平时开发项目也会经常遇到，编写可复用模块化的项目，是我们永恒不变的理念yes

正如上面所说，如果把用组件的人看为用户，那就需要让用户去git上先pull下这个组件文件 —> copy到自己项目中 —> 然后import到对应位置 —> 再用Vue进行注册 —> 使用

这样繁杂的操作会将人性抛弃的无影无踪。。。而常见的这类工具一般都是可以使用npm一键install，然后一个vue.use()使用，并又一个详细的readme介绍和可运行的示例

这就是我们的最终目标

vue的install

我们常见的像各类UI框架的使用方式都是vue.use()使用，那这个是怎么做到的呢？其实是用了vue的一个install将其生成一个插件，官方文档在此

install这个function里面可以做很多事情，我没有研究太多，根据目前需求暂时做成了这样：

1
2
3
4
5
6
7
import Dropdown from '../src/components/Dropdown.vue'

export default {
    install: function (Vue, options) {
        Vue.component('Dropdown', Dropdown)
    },
}

Dropdown.vue是下拉菜单那个组件，新建js在static下面，将这些内容写入保存（我的命名是vue-semantic-dropdown.js

这样用户使用Vue.use(Dropdown)的时候就会执行install里的内容，就不需要再注册组件了

vue-semantic-dropdown.js放到static是因为这里面的内容不会被压缩处理，npm打包的时候比较方便

npm打包发布

代码部分都准备好了，接下来就是发布了。如果想发布到npm总库中，首先需要有npm的帐号，没有可以到官网注册https://www.npmjs.com/

然后在命令行$ npm adduser，根据提示输入用户名密码等信息

按需在你项目的package.json中增加相应内容（vue-cli生成的项目会自带），比如keywords，repository，license等，name，version也要记得修改，可以去官网查看详细字段这里不做介绍

最重要的是main字段，这里填写的文件路径，将成为用户install下来然后import或者require后的入口文件，像这个项目就应该填static/vue-semantic-dropdown.js。

那么npm install后import Dropdown from 'vue-semantic-dropdown'这里的Dropdown就会是static/vue-semantic-dropdown.js这个文件

改写完成后输入$ npm publish即可发布，成功后可以到npm官网自己的页面看到发布后到样子，兴不兴奋！

用户使用的时候具体就是
1.$ npm install vue-semantic-dropdown --save

2.main.js:

1
2
3
import Dropdown from 'vue-semantic-dropdown'

Vue.use(Dropdown)

最后

这样基本就完成了，最后记得写一个一眼就能看懂如何使用的README.md和放一个可以查看效果的例子在项目中，在App.vue真正引入用一下这类的。我的在这里（为了一颗星星不厌其烦的发地址呲牙）

在发布的时候需要改下version，同一版本不能发布两次，本来也应该这样，对吧～

end