前言
写这篇文章的目的在于个人备忘以及给想开发插件的同学一些借鉴而做的整理，有些不必要的弯路就不要再走了。本文主要使用
vue来写插件，使用官方的vue-cli构建项目。
准备工作
默认你已经配置好了node，npm，webpack环境并且可以顺利使用vue-cli创建项目，还需要做如下准备：
- 注册
github账号 - 注册
npm账号
//附上注册npm账号方法
npm adduser
Username: your name
Password: your password
Email: your email
创建项目
这里一笔带过，还不会的同学请自行百度，教程太多了。
vue init webpack-simple vue-toast-c
cd vue-toast-c
//cnpm为淘宝镜像
cnpm i
cnpm run dev
利用vue-cli创建过项目的同学，这时候你会看到浏览器打开了熟悉的页面，下图：
熟悉的界面
编写插件
到这里已经迈出了第一步，接下来开始编写toast插件，首先在./src目录下创建lib/vue-toast-c.vue和lib/index.js，例子如下：
vue-toast-c.vue：
<template>
<div class="vue-toast-white-mask">
<div class="vue-toast">
<p class="vue-toast-content" v-html="mes"></p>
</div>
</div>
</template>
<script>
export default {
name: 'vue-toast',
props: {
mes: String,
timeout: Number,
callback: Function
}
}
</script>
<style lang="scss">
.vue-toast-white-mask{
position: fixed;
z-index: 2000;
bottom: 0;
right: 0;
left: 0;
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: transparent;
.vue-toast{
min-width: 124px;
max-width: 80%;
background: rgba(40, 40, 40, .85);
text-align: center;
border-radius: 3px;
color: #FFF;
animation: yd-kf-zoom-in .06s ease forwards;
&-content {
font-size: 16px;
padding: 12px 22px;
margin: 0;
word-break: break-all;
}
}
}
</style>
Tip：没有安装 sass的同学会报错，下面附上安装方法。
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
index.js：
import Vue from 'vue';
import VueToast from './vue-toast-c.vue';
const ToastConstructor = Vue.extend(VueToast);
const instance = new ToastConstructor().$mount();
const pageScroll = (() => {
const fn = (e) => {
let evt = e || window.event;
evt.preventDefault();
evt.stopPropagation();
};
let islock = false;
return {
lock(el) {
if (islock) return;
islock = true;
(el || document).addEventListener('mousewheel', fn);
(el || document).addEventListener('touchmove', fn);
},
unlock(el) {
islock = false;
(el || document).removeEventListener('mousewheel', fn);
(el || document).removeEventListener('touchmove', fn);
}
};
})();
ToastConstructor.prototype.closeToast = function () {
const el = instance.$el;
el.parentNode && el.parentNode.removeChild(el);
//恢复滚动
pageScroll.unlock();
typeof this.callback === 'function' && this.callback();
};
const Toast = (options = {}) => {
instance.mes = options.mes;
instance.timeout = ~~options.timeout || 2000;
instance.callback = options.callback;
document.body.appendChild(instance.$el);
//禁止滚动
pageScroll.lock();
const timer = setTimeout(() => {
clearTimeout(timer);
instance.closeToast();
}, instance.timeout + 100);
};
const install = (Vue) => {
Vue.prototype.$toast = Toast;
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(install);
}
export default install;
本地调试插件
这时候插件就写好了，是不是很简单，其实没有想象中的那么难。既然写好了，我们本地测试一下，你也可以复制我的代码，代码如下：
main.js：
import Vue from 'vue'
import App from './App.vue'
import Toast from './lib/index.js'
Vue.use(Toast);
new Vue({
el: '#app',
render: h => h(App)
})
App.vue：
<template>
<div id="app">
<img src="./assets/logo.png">
<h2>{{newMsg}}</h2>
<button @click="showToast">show toast</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
newMsg: 'vue-toast-c Demo'
}
},
methods: {
showToast() {
this.$toast({mes: this.msg});
}
}
}
</script>
<style lang="scss">
*{
padding: 0;
margin: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 100px;
}
h2 {
padding: 20px 0;
}
button{
position: relative;
color: #fff;
background-color: #44cc8a;
border: none;
width: 80%;
margin: 0 auto;
display: block;
font-size: 16px;
height: 40px;
margin-top: 10px;
border-radius: 3px;
outline: none;
overflow: hidden;
&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .2s, opacity .5s;
}
&:active:after {
transform: scale(0, 0);
opacity: .4;
transition: 0s;
}
}
</style>
这时候你的界面应该显示如下，如果报错，请留言或者重新按照我的步骤走一遍。
调用示意图
打包插件
现在已经完成第二步，接下去打包写好的插件，不过先修改打包配置，找到根目录下webpack.config.js这个文件，按照如下修改，未贴出的代码表示不变：
module.exports = {
entry: './src/lib/index.js', // 打包发布时入口
//entry: './src/main.js', // 开发时项目入口
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-toast-c.js', // 打包生成的模块名
library: 'vueToastC', // 你使用require时的模块名
libraryTarget: 'umd',
umdNamedDefine: true
}
...
}
ok，修改完了后可以打包了，运行
cnpm run build
打包好了后，会在根目录下生成一个dist文件夹，里面包含vue-toast-c.js和vue-toast-c.js.map两个文件，说明打包成功。
修改package.json
修改根目录下的package.json文件，修改和添加以下内容，未贴代码表示不变：
{
"private": false,//这里一定要改为 false
"main": "dist/vue-toast-c.js",//默认 import 引入插件时，读取的文件
"repository": {
"type": "git",
"url": "https://github.com/chenfangsheng/vue-toast-c"//这里为我自己插件存放github的地址
}
}
这里提一下，还不会将代码发布到github的同学推荐读这篇文章《 github入门到上传本地项目》，不想再写了，原谅我懒，而且别人写的非常详细了，也没必要在写。
Tip：记得修改根目录下.gitignore文件，去除dist/,否则会被忽略。
发布插件到npm
最重要的一步来了，将打包好的插件发布到npm，是不是很激动，发布自己开发的第一个npm插件，不过先别激动，还需先登录npm，这里用到上面让同学们注册的npm账号。
Tip：由于我用的是淘宝镜像（没有使用cnpm的同学直接跳过），这时候需要先切换回npm源，推荐一个npm快速切换工具nrm，安装然后切换回npm命令行如下：
cnpm install -g nrm
nrm use npm
如果如下表示切换成功
nrm切换npm示意图
切换好了我们来看看当前npm登录的是那个账号：
npm whoami //这时候别再用cnpm了
如果是自己的，那就不需要登录了，否则登录一下，如下：
Tip：注意一下有些同学在注册时，选择了输入密码不显示，那么你在登录时密码照常输入，正常回车就好。
npm login //登录
登录成功后，发布一下：
npm publish //发布
如果如下显示，表示发布成功（有时候会发布失败，有可能是网络问题，多发布几次就好了）：
结语
到此，文章就结束了，同学们可以试一试自己发布的插件。
nrm use taobao //切换回淘宝镜像
cnpm install vue-pay-keyboard -S //下载插件
网友评论