Vue.js构建你的第一个包并在NPM上发布的方法步骤

.ku-button--info {
color: #fff;
background-color: #909399;
border-color: #909399;
}

.ku-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}

.ku-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}

/*大小*/
.ku-button--medium {
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
}

.ku-button--small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}

.ku-button--mini {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}

/*是否圆角*/
.ku-button--round {
border-radius: 20px;
}
</style>

后续我们就可以像这样使用:

<ku-button type=”success” size=”mini” round>小按钮</ku-button>
虽然我将按钮模板进行了简化，但这里有几个学习点很重要：

使用了BEM规范。（更多关于BEM的知识，可查看这里）
通过props配置接收3个参数（按钮类型，按钮大小，按钮是否为圆角），这样方便使用者随时切换不同主题的按钮。
使用了slot插槽，这样我们就可以这样使用<ku-button>按钮文本</ku-button>
定义了@click事件，当点击组件时会触发$emit

步骤 3: 写一个Install方法

文章前面提到了Vue.use()方法，调用时它将会执行install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

下面，我们在src中创建一个index.js文件，然后再里面写：

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时，都需要增加版本号。你可以查看更多语义化版本号的知识