本文介绍了使用webpack打包编写一个vue插件,分享给大家。具体如下:
<强>一、说明:
需求:创建一个土司插件
思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。
#项目目录:
| _ package.json
| _ webpack.config.js
| _ .babelrc
| _ dist
| _ src
| _ index . html
| _自由
| _ 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,常用装载机解析器
- 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不再支持相对路径,所以在节点项目中,可以使用路径模块来将相对路径转为绝对路径
var=路径要求(“路径”);//核心配置
module.exports={//入口文件
条目:“。/src/lib/index.js ',//出口配置
输出:{
路径:path.join (__dirname。/dist),//输入路径
文件名:“vue-toast-demo。js ',//打包后文件名//打包后的格式(三种规范amd, cmd, common.js)通过umd格式规范可以适应各种规范,以及全局窗口属性
libraryTarget:“umd格式”,
图书馆:“VueToastDemo”
},
模块:{
规则:[//解析模块时需要的模块加载器
{
测试:/\ .vue/美元,
装载机:“vue-loader”
},
{测试:/\。js/美元,排除:/node_modules,装载机:“babel-loader”}
]
},
插件:[]
}
之前
<强>,二,开发一个vue-toast插件
<李>借助npm平台发布一个vue插件
<李>流程:声明插件——写插件——注册插件——使用插件
官方文档中说明:写插件有四种方法:
# 1。添加全局方法或属性
Vue。myGlobalMethod=function () {…}
# 2。添加全局资源
Vue.directive (my-directive, {
绑定,绑定(el vnode oldVnode) {…}
})
# 3。注入组件
Vue.mixin ({
创建:函数(){}
})
# 4。添加实例方法
Vue.prototype。$ myMethod=函数(选项){}
之前
开vue插发件的几个基本步骤:
1, Vue。js的插件应当有一个公开方法安装。
2,安装方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象
并且。安装=function (Vue、期权){…}
官方说明:https://cn.vuejs.org/v2/guide/plugins.html使用插件
从“进口ToastComonent。/vue-toast。vue '//引入vue模板组件
让面包={}
吐司。安装=function(){//通过安装注册插件
Vue.prototype。吐司美元=function () {
Vue.extend (ToastComponent)
}
}
如果(window.Vue) {//如果是直接用脚本标签引入插件,可通过此法注册插件到vue
Vue.use(面包)
}
出口默认烤面包;//导出烤面包
之前
<>强实践
需求:一个面包弹层功能
1, template.vue。提供html模板
& lt; template>
& lt;部分类=皌oast-container”: class=笨杉? 63;“淡入”:“淡出”比;
& lt; div类=巴了尽北?
& lt; span>{{消息}}& lt;/span>
& lt;/div>
& lt;/section>
& lt;/template>
& lt; script>
出口默认{
名称:“tmp”,
数据（）
返回{
可见:没错,
消息:“默认提示语”
}
}
}
& lt;/script>
& lt; style>
& lt;/style>
之前
2, index.js
从“进口ToastComponent。/vue-toast.vue '
让面包={}
吐司。安装=function (Vue、期权){
var选择={
持续时间:3000
}
(var关键的选项){
选择[主要]=选项(例子);
}
Vue.prototype。$面包=函数(味精、选项){
如果(typeof选项=='对象'){
(var关键的选项){
选择[主要]=选项(例子)
}
}
const ToastController=Vue.extend (ToastComponent);
var=new ToastController实例()。美元山(document.createElement (div))
实例。消息=味精;
实例。可见=true;
document.body.appendChild(实例。el美元)
setTimeout(()=祝辞{
instance.visible=false;
document.body.removeChild(实例。el美元)
},opt.duration)
}
Vue.prototype。$吐司['显示']=function(味精、选项){
Vue.prototype。美元的面包(味精,选项);
}
}
如果(window.Vue) {
Vue.use(面包)
}
出口默认烤面包;
