这一篇开发的插件 类似elementUI中的 Message 消息提示
用this.$message()来调用 并且可以传参数
image.png
一. 前期准备(搭建项目)
用 vue init webpack-simple myPlugin 指令去搭建项目
image.png
搭建出来的结构是这样的:
image.png
二. 编写插件
这里用到两个字体图标
image.png
-
在src目录下新建一个plugin文件夹(这是写插件的文件), 在plugin里面新建一个plugin.js和plugin.vue文件
image.png
- 调用插件(可以用先调用插件, 要不然在插件文件里面写的代码在运行项目之后看不到插件写的效果)
调用插件和elmentUI是一样的
image.png
- 编写插件文件夹下的plugin.js和plugin.vue文件
plugin.js
插件的入口文件
这里主要用到Vue.exten()构造器 (不懂自行看vue官网)
image.png
import plugin from './plugin.vue'
const MyPlugin = {
install (Vue, option = null) {
// 开发插件方式1: 用Vue.extend() 然后new出来 最后挂载 开发的插件类似element中的弹出框 在组件中直接用this.$message()就能调用
// Vue.extend(plugin)生成的构造器需要new出来(这时候能访问plugin组件里的属性) 最后挂载就可以了
// 构造vue子类构造器
const Constructor = Vue.extend(plugin)
// 通过上面的构造器生成 MyHeaderConstructor 通过new出来的实例对象是可以直接访问组件plugin中的属性
const Profile = new Constructor()
console.log(Profile)
// 当在组件中调用vue原型上的this.$message()这个方法 也就触发了插件plugin组件中的message()方法
Vue.prototype.$message = function (message) {
Profile.changeStatus(message)
}
const ele = document.createElement('div')
document.body.appendChild(ele)
Profile.$mount(ele)
}
}
export default MyPlugin
plugin.vue
插件的逻辑
<template>
<div class="content">
<transition name="fade">
<div class="box" v-show="isShow">
<div class="inside">
<div class="top">
<div class="circle" :class="defaulTransmit.pluginData.type==='success'?'success':'warning'">
<i
class="iconfont font"
:class="defaulTransmit.pluginData.type==='success'?'iconduigou':'icongantanhao'"
></i>
</div>
</div>
<p class="botton" :class="defaulTransmit.pluginData.type==='success'?'blue':'orange'">{{defaulTransmit.pluginData.message}}</p>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
defaulTransmit: {
pluginData: {}
},
isShow: false
}
},
methods: {
changeStatus (message) {
let params = {
message: message.message,
type: message.type
}
this.$set(this.defaulTransmit, 'pluginData', params)
this.isShow = true
setTimeout(() => {
this.isShow = false
}, message.time)
}
}
}
</script>
<style lang='less' scoped>
p {
margin: 0;
}
.success {
background-color: #14cab4;
}
.warning {
background-color:#ffb800;
}
// 过渡的样式
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s;
// transition: opacity 0.5s;
}
// 显示时的样式
.fade-enter {
opacity: 0;
}
// 隐藏时的样式
.fade-leave-to {
opacity: 0;
}
.blue {
color: #14cab4;
}
.orange {
color: #ffb800;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 15px;
box-sizing: border-box;
width: 517px;
border: 1px solid rgb(230, 230, 230);
.top {
position: relative;
margin: 20px 0;
height: 196px;
background: url('../assets/tip.png') no-repeat center;
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
width: 123px;
height: 123px;
line-height: 123px;
border-radius: 123px/2;
text-align: center;
.font {
color: #ffffff;
font-size: 75px;
}
}
}
.botton {
text-align: center;
height: 83px;
line-height: 83px;
font-family: AdobeHeitiStd-Regular;
font-size: 30px;
letter-spacing: 2px;
}
}
</style>
三. 在组件中使用这个消息提示框
image.png
<template>
<div id='app'>
<button @click="handle()">点击测试</button>
</div>
</template>
<script>
export default
name: 'app',
methods: {
handle () {
// 调用插件
this.$message({
message: '警告哦，这是一条警告消息', // 消息框的文本内容
type: 'warning', // 消息框的类型 目前就设置了(warning和success)
time: 2000 // 消息后多少s之后消失
})
}
}
}
</script>
<style lang='less' scoped>
</style>
四. 效果
发送到.gif
五. 发布发到npm
1.修改根目录下webpack.config.js文件 红色标记的地方
1583245202(1).jpg
2. 运行npm run build 打包生成dist文件
image.png
3. 改变根目录下index.html中引入的js文件(修改成刚才dist文件夹中的js文件)
image.png
4. 配置package.json
版本号1.0.0默认的都需要更改
image.png
5. 在根目录下的gitignore 文件，去掉 dist/，如下：
image.png
6. 发布到npm
a. 运行命令 npm login
根据提示填写npm 账号 密码 邮箱
image.png
b. 运行命令 npm publish
7. 发布中可能遇到的问题
- no_perms Private mode enable, only admin can publish this module
原因：因为镜像设置成淘宝镜像了，设置回来即可
方案：npm config set registry http://registry.npmjs.org
- npm publish failed put 500 unexpected status code 401
原因：一般是没有登录
方案：重新登陆一次
- npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
原因：包名被占用
方案：修改包名即可
nrm ls 查看镜像 切换成淘宝镜像 nrm use taobao
网友评论