第一步
先注册一个npm账号 点击前往注册
第二步
本地开发
初始化本地项目
新建一个js文件配置插件的入口文件
import testPanel from '路径'
import testToast from '路径'
let test = { }
test.install = function (Vue,options){
Vue.prototype.$myMethod = function(arr){
if(arr.length < 0){
return false
}else{
arr = arr.join(‘链接’)
return arr
}
}
Vue.componetnt(testPanel.name,testPanel) //name组件名的name
Vue.componetnt(testToast.name,testToast) //name组件名的name
}
export default test
自定义组件
<template>
<div>
<div class="number-panel">
<p v-show="checkedNumber.length>0" class="number-show">{{checkedNumber}}</p>
<p v-show="!checkedNumber" class="number-show"> </p>
<ul>
<li @click="clickThisNumber($event)" v-for="index in 9" :key="index">{{index}}</li>
<li @click="clickThisNumber($event)">0</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'test-panel', // 这里需要注意下，我们是采用的全局注入我们的组件，所以在后面因为我们的组件后，会直接使用这个命名的标签
data () {
return {
checkedNumber: ''
}
},
components: {
},
methods: {
clickThisNumber (e) {
this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML)
}
}
}
</script>
<style>
.number-show {
height: 20px;
}
.number-panel ul {
padding: 0;
}
.number-panel ul li{
display: inline-block;
width: 28%;
height: 50px;
line-height: 50px;
margin-top: 20px;
background: #ddd;
border-radius: 8px;
margin-right: 10px;
}
.number-panel ul li input {
display: none;
}
</style>
组件效果图
自定义组件
<template>
<div>
<div class="toast" ref='toastPosition' :class="{active: toastHidden}">
<div class="toast-warpper">
{{text}}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'test-toast',
data () {
return {
text: '',
toastHidden: false
}
},
created () {
// this.toastPlugin()
},
components: {
},
methods: {
toastPlugin (msg, time) {
this.text = msg
this.toastHidden = true
setTimeout(() => {
this.toastHidden = false
}, time)
}
}
}
</script>
<style>
.toast {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0px;
min-height: 0px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
color: #fff;
transition: all 0.5s;
z-index: -1;
opacity: 0;
}
.toast.active {
width: 150px;
min-height: 25px;
opacity: 1;
z-index: 11;
}
</style>
组件效果图
本地测试
//全局引入 main.js
import 名字 from '入口文件.js'
//使用
Vue.use(名字)
打包
发布到npm
本地添加npm用户
npm adduser
username:
password:
查看用户npm whoami
登录npm
npm login
发布
npm publish
