制作npm插件vue-toast-m实例练习
制作npm插件vue-toast-m实例练习（消息弹窗）
一、使用npm插件
import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) this.$toast.show("hello,toast") //or this.$toast.show("hello,toast",{ duration:3000 }) // or this.$toast.show("hello,toast",function(){ //to-do })
二、项目结构
npm插件原地址：https://www.npmjs.com/package/vue-toast-m
webpack官网： https://webpack.js.org/
项目github地址： https://github.com/ccyinghua/vue-toast-demo
|-- src |-- lib |-- index.js --// 入口文件 |-- vue-toast.vue |-- index.html -- // 静态文件 |-- .babelrc |-- package.json |-- webpack.config.js --// 配置文件
三、npm 插件制作
3.1 新建vue-toast-demo文件夹
cd vue-toast-demo // 进入文件夹 npm init // 初始化npm,生成package.json
输入npm init之后生成package.json
package.json
{ "name": "vue-toast-demo", "version": "1.0.0", // 版本 "description": "a toast plugin for mobile", "main": "index.js", // 入口文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { // github "type": "git", "url": "git+https://github.com/ccyinghua/vue-toast-demo.git" }, "keywords": [ // 关键词 "toast", "vue-toast" ], "author": "ccyinghua", // 作者 "license": "ISC", "bugs": { "url": "https://github.com/ccyinghua/vue-toast-demo/issues" }, "homepage": "https://github.com/ccyinghua/vue-toast-demo#readme" }
3.2 编写静态页面
vue-toast-demo/src文件夹下建立index.html静态页面
3.3 插件功能实现
vue-toast-demo/src/lib/vue-toast.vue组件页面，将静态文件搬到vue文件中
<template> <section class="toast-container"> <div class="toast" v-bind:class="[visible?'fade-in':'fade-out']"> <span>{{message}}</span> </div> </section> </template> <script> export default{ data(){ return { message:'', visible:false } } } </script> <style scoped lang="scss"> ...... </style>
src/lib/index.js入口文件
// 入口文件 import ToastComponent from './vue-toast.vue' let Toast = {} Toast.install = function(Vue,options){ // 必须定义一个install方法，才可以在使用时Vue.use() // 默认配置 var opt = { duration:3000 } // 用户配置覆盖默认配置 for(var key in options){ opt[key] = options[key]; } // 在vue的原型上面拓展一个$toast函数 Vue.prototype.$toast = function(message,option){ let callback = ''; // 配置覆盖,设置局部配置 if(typeof option == 'object'){ for(var key in option){ opt[key] = option[key]; } }else if(typeof option == 'function'){ callback = option; } // 用Vue.extend()继承ToastComponent组件，构成一个ToastController实例 const ToastController = Vue.extend(ToastComponent); //new ToastController()相当于一个新的Vue对象 //这个对象挂载到空的div里面，类似于vue组件中 var vm = new Vue({ data:{} ... }).$mount("#app")功能 var instance = new ToastController().$mount(document.createElement("div")); instance.message = message; instance.visible = true; document.body.appendChild(instance.$el); setTimeout(()=>{ instance.visible = false; setTimeout(()=>{ document.body.removeChild(instance.$el); callback && callback(); },500) }, opt.duration) }; // Vue.prototype.$toast['show'] = function(message,option){ // Vue.prototype.$toast(message,option); // } // Vue.prototype.$toast['success'] = function(message,option){ // Vue.prototype.$toast(message,option); // } // Vue.prototype.$toast['info'] = function(message,option){ // Vue.prototype.$toast(message,option); // } // Vue.prototype.$toast['error'] = function(message,option){ // Vue.prototype.$toast(message,option); // } // 简化上面代码 ['show','success','info','error'].forEach(function(type){ Vue.prototype.$toast[type] = function(message,option){ return Vue.prototype.$toast(message,option); } }); } // if(window.Vue){ // Vue.use(Toast); // } if(typeof window !== 'undefined' && window.Vue){ window.Vue.use(Toast); } // 导出 export default Toast;
3.4 webpack打包功能实现
（1） webpack准备
cnpm install webpack --save // 安装webpack
vue
cnpm install --save vue-template-compiler vue-loader
支持es6 http://babeljs.io/ 安装 babel-preset-env 后要建立 .babelrc 文件写配置
cnpm install --save babel-core babel-loader babel-preset-env // babel-core是es6核心的文件，一定要有
（2） 新建webpack.config.js配置文件
var path = require('path'); module.exports = { entry: './src/lib/index.js', // 入口 output: { // path:'./dist', // 指定输出路径 path:path.join(__dirname,'./dist'), // 必须是绝对路径 filename: 'vue-toast-demo.js' // 插件的名字 }, module:{ // module模块；解析一些webpack不认识的文件 rules:[ { test:/\.vue$/, loader:'vue-loader' } ] }, // js文件的合并，HTML的生成，插件等等 plugins:[ ..... ] };
（3） 打包命令
webpack // 如果文件不叫webpack.config.js 可以使用--config参数传入路径 例：webpack --config ./webpackConfig/dev.config.js
如果成功会生成dist/vue-toast-demo.js文件，如果报错根据报错提示安装缺少的插件等
比如上图就是缺少 vue-template-compiler 插件，安装一下就行
上图是缺少处理css样式的，vue-toast.vue是用sass处理样式
安装sass
cnpm install node-sass sass-loader --save // sass-loader依赖于node-sass cnpm install css-loader style-loader --save
（4）webpack.config.js详细配置
安装了各插件后还需配置
var path = require('path'); module.exports = { entry: './src/lib/index.js', // 入口 output: { // path:'./dist', // 指定输出路径 path:path.join(__dirname,'./dist'), // 必须是绝对路径 filename: 'vue-toast-demo.js', // 插件的名字 libraryTarget:'umd', // 输出的文件格式,umd可适用各种规范(cmd/amd/commonjs...) library:'VueToastDemo' // 输出的文件库的名字 }, module:{ // module模块；解析一些webpack不认识的文件 // 放加载器 rules:[ { test:/\.vue$/, // 处理vue文件 loader:'vue-loader', exclude:/node_modules/, options:{ // 解析vue文件中一些其他的语法 loaders:{ scss:'style-loader!css-loader!sass-loader' // loader解析从右到左，先用sass-loader处理成css，再用css-loader进行处理,再用style-loader插入到HTML中 } } }, { test:/\.js$/, // 处理js文件 loader:'babel-loader', include:path.join(__dirname,'src'), // 指定目录解析 exclude:/node_modules/ // 过滤掉node_modules文件夹 } ] }, // js文件的合并，HTML的生成，插件等等 plugins:[ ...... ] };
3.5 打包后测试
src/index.html修改使用
cnpm install vue --save // 安装vue
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript" src="../dist/vue-toast-demo.js"></script> <div id="app" class="text-center"> <h2>vue-toast for mibile</h2> <div class="form-group row"> <a class="btn btn-primary" href="javascript:;" @click="toast">默认toast</a> </div> <div class="form-group row"> <a class="btn btn-info" href="javascript:;" @click="toast2">5秒后关闭toast</a> </div> <div class="form-group row"> <a class="btn btn-success" href="javascript:;" @click="toast3">关闭toast后，执行回调</a> </div> </div> <script type="text/javascript"> new Vue({ el:"#app", methods:{ toast:function(){ this.$toast.show("当前点击了标签"); }, toast2:function(){ this.$toast.show("当前点击了标签",{ duration:5000 }); }, toast3:function(){ this.$toast.show("当前点击了标签",function(){ alert("这里是回掉函数") }); } } }) </script>
执行webpack打包命令后运行index.html
四、npm插件发布
npm官网： https://www.npmjs.com/ 注册自己的用户，记住注册时的用户名密码。接下来就可以执行命令。
npm adduser // 添加用户：输入用户名密码和邮箱 npm whoami // 验证当前用户是谁，验证是不是之前添加的用户 npm publish // 发布
package.json中name是插件的名字，首先要在npm搜索一下是不是有同名字的插件，如果有是不能以这个名字发布的；version是插件版本，如果改动了项目，需要修改一下版本号再进行npm publish发布。
因为插件名字在npm已经有了，所以把name改为vue-toast-demo-cc再发布。 发布成功：https://www.npmjs.com/package/vue-toast-demo-cc
