vue插件开发及npm发布

一、vue插件开发

思路：通过vue的install来实现插件封装，vue.use来实现插件使用

1.创建vue项目，这里选择vue2.0版本初始化项目

vue create mmlu-costom-test

2.新建插件所需文件夹

项目建立完成后，在mmlu-costom-test的根目录下新建lib文件夹，用于存放所需的插件
lib文件夹下再新建mmlu-costom及index.js、package.json文件，
mmlu-costom夹下再新建lib文件夹及index.js、pay.vue文件，

项目目录如下图所示：

3.编写js导出插件，通过install来实现

编写lib中的index.js文件

import pay from ‘./pay’;  //引入vue组件
const myPlugin = {
    install(vue, options){
        vue.component('pay', pay);  //vue组件注入
    }
}

export default myPlugin;

编写pay.vue文件，此步骤略，可以自行参考组件的编写，写一个通用组件即可；

以上插件已经编写完成，是不是很简单?

问题来了，如果此时如若想在App.vue中或者其他文件中使用lib中的插件该如何？

1.main.js中全局引用lib中的mmlu-costom 此时需编写mmlu-costom下根目录中的index.js

module.exports = require('./lib');  //指向的是同级目录下的lib文件

2.main.js中则可以直接引用了，如下：

import myPlugin from './../lib/mmlu-costom'
Vue.use(myPlugin)

以上则实现了插件的全局注入

这里有个小技巧检测自己的插件是否编写完整，将mmlu-costom整个文件夹放入依赖包中，即node_modules中，则可以直接在main.js中用以下方式引入：

import myPlugin from 'mmlu-costom';
Vue.use(myPlugin)

3.App.vue中直接引用，传值略，根据自身所写的组件传值

<pay></pay>

二、npm发布

1.直接进入到mmlu-costom文件夹，执行npm init命令此时输入对应的包版本等信息，对应如下，mmlu.costom下的package.json文件则会生成如下信息：

标题
version	包的版本，默认是1.0.0
description	包的描述
entry point	包入口文件，默认是`index.js`，可自定义。
test command	测试命令，配置这个命令，可以直接npm test来执行代码，目前直接回车，不需要
keyword	包的关键词，可以通过关键词到npm上搜索到你发布的包，比如说mmlu-costom
author	作者，如邮箱
license	开源协议，直接回车

2.npm 注册账号

npmjs官网注册

账号注册好后，执行npm login登录如果设置过淘宝镜像，请切回，执行以下命令

npm config set registry http://registry.npmjs.org

3.npm login时填写自己刚刚注册的账号等信息

4.npm whoam i来检测是否登录成功，以下返回则为成功

5.执行npm publish发布，如下最后一行 + mmlu-costom@1.0.2，则代码发布成功，此时去npmjs官网的仓库则可以搜索到你发布的插件了

注：如果你在发布的时候出现403错误的时候，请查看以下博客自行排查本人在发布的时候遇到过名字重名的情况，换了个包名字就可以了 blog.csdn.net/meteorsshow…

简洁版vue插件开发及npm发布