随着 vue.js 越来越火, vue.JS 的相关插件也在不断的被贡献出来, 数不胜数. 本文就来为大家介绍一下使用 webpack 打包一个 vue 插件的方法.
一, 说明:
需求: 创建一个 toast 插件
思路: 利用 vue 组件创建模板, 使用 webpack 打包生成插件再全局使用.
- # 项目目录:
- |_ package.JSON
- |_ webpack.config.JS
- |_ .babelrc
- |_ dist
- |_ src
- |_ index.html
- |_ lib
- |_ index.JS
- |_ vue-toast.vue
1,webpack 基础
基础插件
HTML-webpack-plugin : 根据同一个模板生成多个页面
extract-text-webpack-plugin
UglifyJSPlugin : JS 压缩插件
CommonsChunkPlugin : 把多个页面中公用的文件抽出
clean-webpack-plugin : 打包过程前清除以前的文件
copy-webpack-plugin:
常用 loader 解析器
- CSS-loader (解析 CSS 文件)
- Sass-loader/Less-loader/node-Sass (预编译解析)
file-loader/url-loader 解析图片(PNG,jpg/svg/gif)
给 CSS 添加前缀: postcss-loader,autoprefixer
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 规范可以适应各种规范, 以及全局 Windows 属性
- 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){...}
3, 官方说明: 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(Windows.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(Windows.Vue){
- Vue.use(Toast)
- }
- export default Toast;
demo.HTML
- <!DOCTYPE HTML>
- <HTML>
- <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>
- <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
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/vue-js/17884.html