详解使用webpack打包编写一个vue-toast插件
本文介绍了使用webpack打包编写一个vue插件，分享给大家。具体如下：
一、说明：
需求：创建一个toast插件
思路：利用vue组件创建模板，使用webpack打包生成插件再全局使用。
# 项目目录: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index.js |_ vue-toast.vue
1.1 webpack基础
1、基础插件
- html-webpack-plugin ：根据同一个模板生成多个页面
- extract-text-webpack-plugin
- UglifyJSPlugin ： js压缩插件
- CommonsChunkPlugin ： 把多个页面中公用的文件抽出
- clean-webpack-plugin ： 打包过程前清除以前的文件
- copy-webpack-plugin:
2、常用loader解析器
- css-loader （解析css文件）
- sass-loader/less-loader/node-sass （预编译解析）
- file-loader/url-loader 解析图片（png，jpg/svg/gif）
- 给css添加前缀： postcss-loader，autoprefixer
3、webpack.config.js配置文件
//webpack3.0不再支持相对路径，所以在node项目中，可以使用path模块来将相对路径转为绝对路径
var path = require('path');
// 核心配置
module.exports={
// 入口文件
entry:'./src/lib/index.js',
// 出口配置
output:{
path:path.join(__dirname,'./dist'), //输入路径
filename:'vue-toast-demo.js', //打包后文件名
// 打包后的格式（三种规范amd,cmd,common.js)通过umd规范可以适应各种规范，以及全局window属性
libraryTarget:'umd',
library: 'VueToastDemo'
},
module:{
rules:[ //解析模块时需要的模块加载器
{
test:/\.vue$/,
loader:'vue-loader'
},
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
plugins:[]
}
二、开发一个vue-toast插件
- 借助npm平台发布一个vue插件
- 流程： 声明插件——写插件——注册插件——使用插件
官方文档中说明：写插件有四种方法：
# 1.添加全局方法或属性
Vue.myGlobalMethod = function(){...}
# 2. 添加全局资源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){...}
})
# 3. 注入组件
Vue.mixin({
created:function(){}
})
# 4. 添加实例方法
Vue.prototype.$myMethod =function(options){}
开发vue插件的几个基本步骤：
1、Vue.js 的插件应当有一个公开方法 install 。
2、install方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
myplugin.install = function(Vue,options){...}
官方说明：https://cn.vuejs.org/v2/guide/plugins.html#使用插件
import ToastComonent from './vue-toast.vue' //引入vue模板组件
let Toast = {}
Toast.install = function(){ //通过install注册插件
Vue.prototype.$toast = function(){
Vue.extend(ToastComponent)
}
}
if(window.Vue){
//如果是直接用script标签引入插件，可通过此法注册插件到vue
Vue.use(Toast)
}
export default Toast; //导出toast
实践
需求：一个toast弹层功能
1、template.vue。提供html模板
<template>
<section class="toast-container" :class="visible?'fade-in':'fade-out'">
<div class="toast">
<span>{{message}}</span>
</div>
</section>
</template>
<script>
export default {
name:'tmp',
data(){
return{
visible:true,
message:'默认提示语'
}
}
}
</script>
<style>
</style>
2、index.js
import ToastComponent from './vue-toast.vue'
let Toast = {}
Toast.install = function(Vue,options){
var opt={
duration:3000,
}
for(var key in options){
opt[key] = options[key];
}
Vue.prototype.$toast=function(msg,option){
if(typeof option =='object'){
for(var key in option){
opt[key]=option[key]
}
}
const ToastController= Vue.extend(ToastComponent);
var instance = new ToastController().$mount(document.createElement('div'))
instance.message = msg;
instance.visible = true;
document.body.appendChild(instance.$el)
setTimeout(()=>{
instance.visible=false;
document.body.removeChild(instance.$el)
},opt.duration)
}
Vue.prototype.$toast['show']=function(msg,option){
Vue.prototype.$toast(msg,option);
}
}
if(window.Vue){
Vue.use(Toast)
}
export default Toast;
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--引入-->
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../dist/vue-toast.js"></script>
</head>
<body>
<div id="app">
<h1>vue-toast for mobile{{msg}}</h1>
<div class="demo-box">
<button @click="test">默认效果</button>
<button>5s后自动关闭</button>
<button>消失后执行回调</button>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'你好'
},
methods:{
test(){
// 使用
this.$toast.show('再来',{
duration:1000
})
}
}
})
</script>
</body>
</html>
总结
- 使用基础Vue构造器，通过vue组件来创建一个子类：Vue.extend(component)
- 编写vue插件的四种方法：常用-Vue.prototype.$method, 其他：Vue.method,Vue.mixin(option),Vue.directive(‘method',option)
- webpack配置output的path必须为绝对路径
- webpack配置三大属性,entry,output,module,plugins
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(
-
基于vuejs+webpack的日期选择插件
基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期 支持限定开始和结束日期范围选择. 支持小时分钟 需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo
-
详解使用webpack打包编写一个vue-toast插件
本文介绍了使用webpack打包编写一个vue插件,分享给大家.具体如下: 一.说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用. # 项目目录: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index.js |_ vue-toast.vue 1.1 webpack基础 1.基础插件 - html-webp
-
详解如何用JavaScript编写一个单元测试
目录 为什么要进行单元测试? 范围界定和编写单元测试 保持单元测试简短而简单 考虑正面和负面的测试用例 分解长而复杂的函数 避免网络和数据库连接 如何编写单元测试 创建一个新项目 实现一个类 配置和添加我们的第一个单元测试 添加更多单元测试 修复错误 最后 测试代码是确保代码稳定的第一步.能做到这一点的最佳方法之一就是使用单元测试,确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入,甚至可能有害的输入时. 为什么要进行单元测试? 进行单元测试有许多不同的方法
-
详解如何制作并发布一个vue的组件的npm包
前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he
-
详解几十行代码实现一个vue的状态管理
介绍 采用集中式存储管理应用的所有组件的状态, 就能实现组件间数据共享 实现 逻辑图 从图上有两条线: Vue.use(vuec), 与 new Vuec.center(options) 第一条线Vue.use(vuec)安装插件 使用Vue.use(vuec)时, 会执行vuec的install方法,会注入参数Vue 所以vuec是这样的, // index.js import {Center, install} from './center' export default {Center,
-
详解如何创建并发布一个 vue 组件
步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te
-
详解如何用js实现一个网页版节拍器
目录 引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效 引言 平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah
-
详解linux lcd驱动编写
有些嵌入式设备是不需要lcd的,比如路由器.但是,还有些设备是需要lcd显示内容的,比如游戏机.测试仪.智能手表等等.所以,今天我们就看看lcd驱动在linux上是怎么进行的. 1.代码目录 drivers/video 2.查看video下的Makefile文件 # SPDX-License-Identifier: GPL-2.0 obj-$(CONFIG_VGASTATE) += vgastate.o obj-$(CONFIG_HDMI) += hdmi.o obj-$(CONFIG_VT)
-
详解linux 摄像头驱动编写
对于现代嵌入式设备,特别是手机来说,摄像头是很重要的一个设备.很多同学买手机,一看颜值,第二就看摄像头拍照如何.所以,从某个角度来说,摄像头是各个厂家主打的应用功能.那么,linux是如何支持摄像头的,我们可以来看一下? 1.代码目录地址 drivers/media 2.v4l2框架 目前linux上的camera都是按照v4l2框架来设计,它的地址位于drivers/media/v4l2-core 3.查看三星soc是如何支持camera的,可以查看drviers/media/platform
-
使用webpack打包后的vue项目如何正确运行（express）
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行. (1).安装express-generator生成器. npm install express-generator -g // 也可使用cnpm比较快 (2).创建一个express项目. express exp
-
详解通用webpack多页面自动导入方案
目录 前言 思考 安装glob 创建工具类 getEntry getHtmlWebpackPlugin 二次封装 应用 前言 在之前,我写了一个webpack的模板.在平时我写栗子或者是写几个页面的时候会用到它.当这个模板需要多个页面时需要手动到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有点麻烦. 思考 我们项目中的页面都是存放在src/pages/*.html中的,我们可以搜索这里文件夹下的html文件我们可以利用node中的glob包中的.s