vue java 插件开发_初探 vue 插件开发

目标：开发一个 vue 插件，发布到npm并且，可以使用 npm 安装。

vue list 查看当前在线的模板信息

步骤如下：

1. 初始化项目

vue init webpack-simple projectName

运行项目：

cd projectName

npm install

npm run dev

2. 写插件

在 src 文件夹下面建 lib 文件夹，用于存放插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示：

toast.vue 的内容如下：

{{msg}}

export default {

name:'toast',

props:{

msg:{

default:"",

type:String

},

isShow:{

default:false,

type:Boolean

}

},

mounted(){

if(this.isShow){

setTimeout(() => {

this.isShow = false

},2500);

}

}

}

.vue-toast-wraper{

background: rgba(0, 0, 0, 0.6);

color: #fff;

font-size: 17px;

padding: 10px;

border-radius:12px;

display: -webkit-box;

-webkit-box-pack: center;

-webkit-box-align: center;

position: fixed;

top: 50%;

left: 50%;

z-index: 2000;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

toast.vue 是做一个 弹出提示，其中传入的参数有两个：toastMsg 和 isSHowToast，分别表示 提示消息以及是否显示提示。

toast.js 中写 install 方法，内容如下：

import VueToastPlugin from './toast.vue'

const toastPlugin = {

install: function(Vue) {

Vue.component(VueToastPlugin.name, VueToastPlugin)

}

}

// global 情况下 自动安装

if (typeof window !== 'undefined' && window.Vue) {

window.Vue.use(toastPlugin)

}

// 导出模块

export default toastPlugin

3. 本地测试

本插件的功能就这么多，因为我们尚未发布，所以先进行本地测试。

3.1 将 App.vue 多余代码删除。

3.2 在 main.js 中引入

import Vue from 'vue'

import App from './App.vue'

import Toast from './lib/toast.js'

Vue.use(Toast)

new Vue({

el: '#app',

render: h => h(App)

})

3.3 在 App.vue 中使用 toast (别忘记需要传递的参数)

export default {

name: 'app'

}

3.4 本地测试的结果，如图，是所期望的

4. 配置打包

本地测试没有问题过后，我们就可以准备一下修改配置，为打包发布做准备。

4.1 修改 webpack.config.js

4.2 修改 package.json

4.3 修改 .gitignore 文件

去掉 dist。

4.4 修改 index.html文件

4.5 项目打包

npm run build

5. 在npm上发布

5.1 注册npm账号

移步 npm官网。

5.2 本地控制台登录 npm 账号

npm adduser

5.3 发布

npm publish

参考文档：

01. 《vue 插件开发教程与发布》 CSDN ，作者：吹过麦田的风；

02. 《Vue 插件开发与发布》 CSDN，作者：白云随风飘；