import KuButton from "./KuButton.vue" export default { install(Vue, options) { // 注册全局组件 // https://cn.vuejs.org/v2/guide/components-registration.html Vue.component("ku-button", KuButton) } }
到这里，一个完整的插件就差不多啦！ 👏
步骤 4: 完善根目录的package.json文件
打开刚刚npm init创建的package.json文件
{ "private": false, "name": "ku-button", "version": "1.0.0", "description": "A niubility button", "author": "sugars", "license": "MIT", "main": "./dist/index.umd.js", "scripts": { "dev": "vue serve KuButton.vue" }, "files": [ "dist" ], "devDependencies": { "bili": "^4.7.3", "rollup-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" } }
说明：
private属性为false时代表你的包不是私有的，所有人都能查看并npm install使用
name属性指后续发布在npm时的包名，请确保你的包名未被注册
version属性指包的版本号，在你每次发布更新到npm时，都需要增加版本号。你可以查看更多语义化版本号的知识
description属性指包的描述信息，写上去好让大家知道你这个包是干嘛用的
main属性指定了包加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
scripts属性指定了运行脚本命令的npm命令行缩写，比如build指定了运行npm run build时，所要执行的命令。
files属性可以指定哪些文件需要被发布到npm上，比如这里指定了dist文件夹里的所有文件
你可以在npm官方文档查看更多关于package.json的知识
打包
打包工具这里我使用的是，一个强大的速度快，零配置的打包工具。
开始安装打包工具：
$ npm install --save-dev bili $ npm install --save-dev rollup-plugin-vue $ npm install --save-dev vue-template-compiler
然后在项目根目录下创建一个bili.config.js配置文件，配置如下：
module.exports = { banner: true, output: { extractCSS: false, format: ['umd'], moduleName: 'KuButton' }, plugins: { vue: true } }
完成后，你只需要执行一个命令就打包完成，就这么简单：
$ bili
打包成功后，在项目根目录下会生成一个dist文件夹，里面有个index.umd.js文件
在npm上分享你的成果
到这里，你的vue插件就开发完成了。剩下最后一步，就是在npmjs上发布你的插件！
但前提是你需要有一个npmjs账号，如果没有的话需要去注册一个，有的话可以跳过这一步。
打开终端，输入：
$ npm login // 回车后，输入你注册npmjs时填写的用户名，密码和邮箱 // 登录成功后，会提示：Logged in as <username> on https://registry.npmjs.org/.
查看当前npm用户登录情况:
$ npm whoami // 如果登录成功，输出的是登录的用户名
检查以上步骤都没问题后，进入刚刚完成的ku-button项目目录，开始发布：
$ npm publish
执行成功后，你的插件就正式发布成功了！！🎉
后续如果要更新插件，只需要增加package.json里的version版本号，然后再次执行npm publish发布更新就可以了！
项目中使用刚发布的插件
你可以像安装其他插件一样：
$ npm install --save ku-button
或者
$ yarn add ku-button
接着，在main.js引用：
import KuButton from "ku-button" import Vue from "vue" Vue.use(KuButton)
最后，在你的页面中这样：
<ku-button round type="success" size="small">真酷！!</ku-button>
