vue-toast-ss v1.0.3
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前缀等