Usage

import VueToast from 'vue-toast-ss'

Vue.use(VueToast)

this.$toast.show("hello")

npm 发布

1、npm addUser 登陆npm Usename: Password: Email

2、npm whoani 验证当前用户是

3、npm publish 发布

• package中name的值，需要在Npm官网上验证是否被使用

vue插件实现思路

1、编写功能组件ToastComponent.vue,其中包含需要传递数值的参数message 2、入口文件toast.js // Vue插件定义原则：需要通过建立installa方法，来注册类 Toast.install // 定义公共方法 Vue.prototype.$toast

// 1、new vue实例(该实例继承了ToastComponent组件) const ToastController = Vue.extend(ToastComponent);

// 2、new 组件 ≈ new vue var instance = new ToastController();

// 3、挂载到一个空的组件 instance.$mount(document.createElement("div"));

// 4、传递参数 instance.message = message; instance.visiable = true;

// 5、在DOM中添加 instance.$el document.body.appendChild(instance.$el); // vm.$el 拿到DOM实例-$mount(document.createElement("div"))

setTimeout(() => { instance.visiable = false; document.body.removeChild(instance.$el); }, opt.duration);

Vue.use(Toast)

3、编写webpack.config.js文件，选择入口与出口文件 4、将打包后的dist文件导入到index.html中后，直接调用

Webpack 基础

Webpack 常用插件

• html-webpack-plugin 通过指定同一个模板生成N个html页面，常用于多页面

• extract-text-webpack-plugin 将css样式抽取出来作为css文件

• UglifyJsPlugin / new webpack.optimize.UglifyJsPlugin() 合并压缩JS文件

• CommonsChunkPlugin / new webpack.optimize.CommonsChunkPlugin() 抽取公共模块

• clean-webpack-plugin 清除上一次文件

• copy-webpack-plugin 复制文件

Webpack 常用Loader

• css-loader 解析css文件

• sass-loader/less-loader/node-sass 解析sass等文件

• file-loader/url-loader 解析图片（指定文件压缩方式，路径等）

• postcss-loader/autoprefixer 给css添加前缀

Webpack 不同于gulp grunt，基于模块化打包工具，具有丰富的插件和Loader, 处理不同的文件，提高编码效率例如css前缀等