基于vue组件，发布npm包

亲测好用，如出错，请留言

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)