1. 初始化项目
vue init webpack-simple projectName运行项目：
cd projectName
npm install
npm run dev2. 写插件
在 src 文件夹下面建 lib 文件夹，用于存放插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示：
toast.vue 的内容如下：
<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，分别表示 提示消息以及是否显示提示。
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 toastPlugin3. 本地测试
本插件的功能就这么多，因为我们尚未发布，所以先进行本地测试。
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 （别忘记需要传递的参数）
<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
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 build5. 在npm上发布
5.1 注册npm账号
移步 npm 官网。
5.2 本地控制台登录 npm 账号
npm adduser5.3 发布
npm publish
扫一扫
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
