初探 vue 插件开发

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

vue list 查看当前在线的模板信息
步骤如下：

1. 初始化项目

运行项目：

npm install
npm run dev

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

toast.vue 的内容如下：

    <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，分别表示 提示消息以及是否显示提示。

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

const toastPlugin = {
    install: function(Vue) {
        Vue.component(VueToastPlugin.name, VueToastPlugin)
    }
}
// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(toastPlugin)
}
// 导出模块
export default toastPlugin

1. 本地测试

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

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

3.2 在 main.js 中引入

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

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

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

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

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

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

4.1 修改 webpack.config.js
4.2 修改 package.json

4.3 修改 .gitignore 文件
去掉 dist。

4.4 修改 index.html文件

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

4.5 项目打包

1. 在npm上发布
   5.1 注册npm账号

移步 npm 官网。

5.2 本地控制台登录 npm 账号

5.3 发布

自己是一个五年的全栈工程师，这里推荐一下我的前端学习交流群：731771211，里面都是学习前端的，群里会不定期更新最新的教程和学习方法，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的web前端党欢迎加入。点击：加入