1.首先使用vue脚手架搭建一个vue项目出来
在这里我们不做搭建项目详解如有疑问请查阅vue-cli官方文档
2.第二步就是在项目的src目录下新建一个我们的插件目录比如views,然在views下创建一个插件入口文件index.js, 一个插件文件areaCode.vue (当然了文件命名都随意)
index.js代码
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
import areaCode from './areaCode.vue'
let test = {}
test.install = function (Vue, options) {
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
Vue.component(areaCode.name, areaCode) // areaCode.name 组件的name属性
}
export default test
areaCode.vue代码
<template>
<div class="areaCode">
<div class="onlineBox" @click="onClick" :style="styelData">
<div class="onlineBox1">{{value}}</div>
<img class="onlineBox2" src="../assets/Drop-downArrow.png" alt />
</div>
<ul class="ul-css" v-if="isShow.show" :style="listStyle">
<li
v-for="(item,index) in codeData"
:key="index"
@click="liClick(item)"
>+{{item.tel}} {{item.name}}({{item.en}})</li>
</ul>
</div>
</template>
<script>
export default {
name: "area-code", // 这里需要注意下,我们是采用的全局注入我们的组件,所以在后面因为我们的组件后,会直接使用这个命名的标签
props: {
styelData: {
type: Object
// default: {}
},
listStyle: {
type: Object
}
},
data() {
return {
value: "+86",
isShow: {
show: false
},
codeData: [
{
short: "CN",
name: "中国",
en: "China",
tel: "86"
},
{
short: "AD",
name: "安道尔共和国",
en: "Andorra",
tel: "376"
},
{
short: "AE",
name: "阿拉伯联合酋长国",
en: "UnitedArabEmirates",
tel: "971"
}
]
};
},
components: {},
methods: {
onClick() {
this.isShow.show = true;
},
liClick(item) {
this.value = "+" + item.tel;
this.isShow.show = false;
this.$emit("selectChange", item.tel);
}
}
};
</script>
<style>
.onlineBox {
width: 80px;
height: 35px;
border: 1px solid #ccc;
position: relative;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.ul-css {
width: 400px;
height: 500px;
border: 1px solid #ccc;
margin: 0;
overflow: scroll;
}
.ul-css li {
text-align: left;
padding-left: 10px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ul-css > li:hover {
background: #ccc;
}
.onlineBox1 {
float: left;
width: 70%;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}
.onlineBox2 {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
}
</style>
到这里一个简单的 插件就完成了下一步就开始调试
3.一般我们的的插件都是通过npm下载依赖,下载下来的包都放在node_modules里,但是我们是调试,就先不用这样只需要在见一个vue文件比如 test.vue
使用代码如下
styelData和listStyle是接收样式的,selectChange是监听事件获取参数的。
<template>
<div class="hello">
<area-code :styelData="styelData" :listStyle="listStyle" @selectChange="selectChange"></area-code>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
styelData: {
width: "100px",
height: "35px"
},
listStyle: {
width: "200px",
height: "300px"
}
};
},
methods: {
selectChange(value) {
console.log(value);
}
}
};
</script>
<style scoped>
</style>
到这里我们的调试就结束了下面就开始把插件发布到npm
在发布前需要修改package.json文件里的两个字段
private改为false
main指向我们插件的入口index.js文件
4.首先我们得去npm注册一个账号 npm官网,然后通过命令行的方式进行登录 npm login,登录的时候可能会出现密码输入不了的情况,就是你输入了但是Password哪里没有直接输就可以了,是可以登录的
登录完成之后在执行 npm publish 命令
这样一个插件就发布上去了,然后去npm官网就可以搜到你的插件。