亲测好用，如出错，请留言
1.项目初始化
使用vue脚手架创建，但vuecli太重，我们使用简单的工程脚手架进行处理，输入命令
vue init webpack-simple my-project
npm install
npm run dev
初始化以后看一下目录：
2. src中写入vue组件
结构类似于这样
考虑其他ui组件的使用，比如vant，
import vant from ‘vant’
Vue.use(vant)
等
index.js中代码可以这样写：
import decreaseFun from './decrease-function.vue'
sumFunction.install = (Vue) =>{
Vue.component(decreaseFun.name,decreaseFun)
}
export default decreaseFun
而在vue组件中
<template>
<div class="calculate">
<p>{{a}}-{{b}}={{sum}}</p>
</div>
</template>
<script>
export default {
name: "decreaseFunc",
props: ["num3", "num4"],
data() {
return {
a: this.num3 ? this.num3 : 0,
b: this.num4 ? this.num4 : 0,
sum: 0
};
},
mounted() {
this.sumFunc();
},
methods: { }
};
</script>
<style>
.calculate {
width: 100%;
line-height: 26px;
}
</style>
和正常写法一样
3.修改webpack.config.js
因为我们最终输出的是build以后的文件内容，需要配置调整
entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/decreaseFunction/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'decreaseFunction.js',
library: 'decreaseFunction', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
4.修改package.json
添加或者修改
"main": "dist/decreaseFunction.js"
"private": false //也可以改为true
5 输入命令
npm run build
6 npm发布
1.首先去npm官网注册账号
2.在该项目根目录下启用cmd
3.输入命令 npm login
4.报错，原因可能是因为你需要验证邮箱，或者npm包重名
5.npm publish 成功
7 使用
npm install xxx --save
import myplugin from 'xxx'
Vue.use(myPlugin)