初探 vue 插件开发

时间 2019-11-11

标签初探 vue 插件开发繁體版

原文原文链接

目标：开发一个 vue 插件，发布到npm而且，能够使用 npm 安装。javascript

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

步骤以下：css

1. 初始化项目

vue init webpack-simple projectName

运行项目：html

cd projectName
npm install
npm run dev

2. 写插件

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

toast.vue 的内容以下：java

<template>
    <div class="vue-toast-wraper" v-show="isShow">
        {{msg}}
    </div>
</template>
<script>
export default {
    name:'toast',
    props:{
        msg:{
            default:"",
            type:String
        },
        isShow:{
            default:false,
            type:Boolean
        }
    },
    mounted(){
        if(this.isShow){
            setTimeout(() => {
                this.isShow = false
            },2500);
        }
    }
}
</script>
<style scoped>
.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%);
}
</style>

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

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

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. 本地测试web

本插件的功能就这么多，由于咱们还没有发布，因此先进行本地测试。npm

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

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 （别忘记须要传递的参数）

<template>
  <div id="app">
    <toast :msg = "'测试'" :isShow = "true"/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
</style>

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

4. 配置打包

本地测试没有问题事后，咱们就能够准备一下修改配置，为打包发布作准备。

4.1 修改 webpack.config.js

关于 library 的详解。

4.2 修改 package.json

4.3 修改 .gitignore 文件

去掉 dist。

4.4 修改 index.html文件

<body>
    <div id="app"></div>
    <script src="/dist/toast.js"></script>
  </body>

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，做者：白云随风飘；