在线预览.
//引入该插件
const CompressionWebpackPlugin = require("compression-webpack-plugin")
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
const plugins = []
// start 生成 gzip 压缩文件
plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]", //目标资源名称
algorithm: "gzip",
test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
threshold: 10240,//只处理比这个值大的资源。按字节计算(楼主设置10K以上进行压缩)
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
})
);
config.plugins = [...config.plugins, ...plugins];
<Connector port="8085" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
compression="on"
useSendfile="false"
compressionMinSize="2048"
compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>
server {
listen 8081;
server_name liangyuqing.cn;
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
现在先来说一下zx-lib
- zx-lib 为element ui 二次封装的form表单以及table组件,现在已上传到npm
- 大家可以在线使用
- 使用方法:
- npm i zx-lib -S
- main.js 中引用
- import zxLib from 'zx-lib'
- Vue.use(zxLib)
现在组件中已经封装了如下组件,后续会慢慢添加其他组件 zxForm中插槽,可以根据自己需要添加自己所需组件
- zxForm 中内置所有改变点击事件通过
this.$emit('event', params)
- type代表是事件类型
- prop代表那个字段改变
- value代表改变后的值
- data中放的为form表单中所有值 表单中内置两个prop值代表提交与重置 提交采取Promise形式,若自己写提交验证可以使用
Promise.all([this.$refs.mForm.submit(), this.$refs.mForm1.submit()]).then(datas => {
console.log("---同时提交-->", '校验成功')
})
也请大家给点小星星
表单拖拽使用vuedraggable实现
配合zx-lib来实现拖拽表单
更多的介绍欢迎大家查看源码