詳解使用webpack打包編寫一個vue-toast插件
本文介紹了使用webpack打包編寫一個vue插件,分享給大家。具體如下:
一、說明:
需求:創(chuàng)建一個toast插件
思路:利用vue組件創(chuàng)建模板,使用webpack打包生成插件再全局使用。
# 項(xiàng)目目錄: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index.js |_ vue-toast.vue
1.1 webpack基礎(chǔ)
1、基礎(chǔ)插件
- html-webpack-plugin :根據(jù)同一個模板生成多個頁面
- extract-text-webpack-plugin
- UglifyJSPlugin : js壓縮插件
- CommonsChunkPlugin : 把多個頁面中公用的文件抽出
- clean-webpack-plugin : 打包過程前清除以前的文件
- copy-webpack-plugin:
2、常用loader解析器
- css-loader (解析css文件)
- sass-loader/less-loader/node-sass (預(yù)編譯解析)
- file-loader/url-loader 解析圖片(png,jpg/svg/gif)
- 給css添加前綴: postcss-loader,autoprefixer
3、webpack.config.js配置文件
//webpack3.0不再支持相對路徑,所以在node項(xiàng)目中,可以使用path模塊來將相對路徑轉(zhuǎn)為絕對路徑 var path = require('path'); // 核心配置 module.exports={ // 入口文件 entry:'./src/lib/index.js', // 出口配置 output:{ path:path.join(__dirname,'./dist'), //輸入路徑 filename:'vue-toast-demo.js', //打包后文件名 // 打包后的格式(三種規(guī)范amd,cmd,common.js)通過umd規(guī)范可以適應(yīng)各種規(guī)范,以及全局window屬性 libraryTarget:'umd', library: 'VueToastDemo' }, module:{ rules:[ //解析模塊時需要的模塊加載器 { test:/\.vue$/, loader:'vue-loader' }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins:[] }
二、開發(fā)一個vue-toast插件
- 借助npm平臺發(fā)布一個vue插件
- 流程: 聲明插件——寫插件——注冊插件——使用插件
官方文檔中說明:寫插件有四種方法:
# 1.添加全局方法或?qū)傩? Vue.myGlobalMethod = function(){...} # 2. 添加全局資源 Vue.directive('my-directive',{ bind(el,binding,vnode,oldVnode){...} }) # 3. 注入組件 Vue.mixin({ created:function(){} }) # 4. 添加實(shí)例方法 Vue.prototype.$myMethod =function(options){}
開發(fā)vue插件的幾個基本步驟:
1、Vue.js 的插件應(yīng)當(dāng)有一個公開方法 install 。
2、install方法的第一個參數(shù)是 Vue 構(gòu)造器,第二個參數(shù)是一個可選的選項(xiàng)對象
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標(biāo)簽引入插件,可通過此法注冊插件到vue Vue.use(Toast) } export default Toast; //導(dǎo)出toast
實(shí)踐
需求:一個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:'默認(rèn)提示語' } } } </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">默認(rèn)效果</button> <button>5s后自動關(guān)閉</button> <button>消失后執(zhí)行回調(diào)</button> </div> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:'你好' }, methods:{ test(){ // 使用 this.$toast.show('再來',{ duration:1000 }) } } }) </script> </body> </html>
總結(jié)
- 使用基礎(chǔ)Vue構(gòu)造器,通過vue組件來創(chuàng)建一個子類:Vue.extend(component)
- 編寫vue插件的四種方法:常用-Vue.prototype.$method, 其他:Vue.method,Vue.mixin(option),Vue.directive(‘method',option)
- webpack配置output的path必須為絕對路徑
- webpack配置三大屬性,entry,output,module,plugins
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue運(yùn)算符報(bào)錯:Syntax Error: Unexpected token問題
這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯:Syntax Error: Unexpected token問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01vue3利用store實(shí)現(xiàn)記錄滾動位置的示例
這篇文章主要介紹了vue3利用store實(shí)現(xiàn)記錄滾動位置的示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)硪黄獪\談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue+elementui 實(shí)現(xiàn)新增和修改共用一個彈框的完整代碼
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對應(yīng)框架是Mint UI ,今天給大家普及vue+elementui 實(shí)現(xiàn)新增和修改共用一個彈框的完整代碼,一起看看吧2021-06-06