目录

vue系列

vue记录（vue2-vue3）

 1、vue2、vue3全局通信

2、控制台报错[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

v-router记录

1、vue-router在query跳转时参数改变，页面不更新的办法

element记录

1、触发图片预览的方法（做个笔记）

2、解决element-ui组件table里面嵌套el-image层级太低的问题

3、element-form表单提交验证，保存时未填项页面回滚到未填项处

4、element-form表单的el-cascader修改数据后不能通过validate验证

其他vue功能记录

1、快速构建vite+vue3+ts项目命令

2、vue-cli 查看打包体积可视化命令

3、vue新开页面（浏览器重新打开页面）

4、服务器webpack打包压缩

vue系列

vue记录（vue2-vue3）

1、vue2、vue3全局通信

• Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。

 1、安装mitt

npm install --save mitt

2、在项目中使用

2.1、在main.js挂到全局

import mitt from 'mitt'

const app = createApp(App)

// vue3.x的全局实例，要挂载在config.globalProperties上
app.config.globalProperties.$EventBus = new mitt()

2.2、封装一个公用方法，在utils文件新建一个bus.js

//bus.js

import mitt from 'mitt'
export default new mitt()

业务模块使用：

发送页面，业务页面调用方法

// a.vue
//在页面引入这个js

import bus from '/utils/bus.js'

//通过on监听/emit触发

const onClose = (i) =>{
   bus.emit('closeTags', i)
}

 接收页面（公用组件页面）

//tag.vue
//公用的组件

import {onBeforeUnmount} from 'vue'

export default {
  setup(){
    //在页面接收
    bus.on('closeTags', data => {
        closeTags(data)
    })

    const closeTags = i =>{
        console.log(i)
    }

    onBeforeUnmount(() => {
      // 移除指定事件
      bus.off('closeTags')

      // 移除全部事件
      bus.all.clear()
    })
  }
}

API：参考mitt - npm

on 的参数：

这里的 handler 建议使用具名函数，因为匿名函数无法销毁。

emit 的参数：

off 的参数：

2、控制台报错[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

 解决方式：

1、安装依赖

npm i default-passive-events -S

2、在main.js文件引入

import 'default-passive-events'

v-router记录

1、vue-router在query跳转时参数改变，页面不更新的办法

1.1对<router-view>标签添加key值，比如：

<template>
  <div id="app">
    <router-view :key="$route.fullPath"/>
  </div>
</template>

fullPath:URL 编码与路由地址有关。包括 path、 query 和 hash

关于 router-view 的 key 属性
由于 Vue 会复用相同组件, 比如 /page/1 => /page/2 或者 /page?id=1 =>
/page?id=2这类链接跳转, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中,添加beforeRouteUpdate钩子来执行相关方法

1.2监听$router(不推荐，虽然重新请求了数据，但是没有给router-view添加key好用)

watch:{
    '$route'(to,form){
      if(to.query.state!=form.query.state){
        this.stateType=to.query.state;
        this.getDetail(); //获取详情
      }
    }
  },

element记录

1、触发图片预览的方法（做个笔记）

第一种：（支持IE 使用elementUi官网文档中的组件）一般项目中需要点击触发事件才进行查看大图，elementUi组件库中并没有写触发需要执行的代码，这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能

第二种：（ 不支持IE　使用el-image-viewer组件，是elementUi自带的但官网文档中可能因不兼容IE没有把它暴露出来，不需要下载包引入即可）

<el-button @click="onPreview">预览</el-button>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
    components: { ElImageViewer },
    data() {
     return {
      showViewer: true,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
     }
    },
    methods: {
    onPreview() {
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    }
} 

原创：elementUi 通过 previewSrcList 预览大图（两种方式） - 塞巴斯酱 - 博客园

2、解决element-ui组件table里面嵌套el-image层级太低的问题

解决方案：找到这个标签把这个z-index复写成z-index:auto

.el-table .el-table__cell{
  z-index:auto
}

3、element-form表单提交验证，保存时未填项页面回滚到未填项处

this.$nextTick(() => {
  var isError = document.getElementsByClassName("is-error");
  isError[0].scrollIntoView({
     // 滚动到指定节点
     // 值有start,center,end，nearest
     block: "center",
     // 值有auto、instant,smooth，缓动动画
     behavior: "smooth",
   });
});

4、element-form表单的el-cascader修改数据后不能通过validate验证

 <el-form-item label="服务类型:" prop="serviceType" label-width="110px">
      <el-cascader clearable v-model="ruleForm.serviceType" :options="serviceOptions" :props="serviceProps" size="medium" ></el-cascader>
</el-form-item>

export default {
  data() {
    const validateOrg = (rule, value, callback) => {
      if (this.ruleForm.serviceType.length === 0) {
        callback(new Error("请选择！"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        channel:'',
        serviceType: [],//
      },
      rules: {
        channel: [{ required: true, message: '请选择', trigger: 'change' }],
        serviceType: [{ type: "array", validator: validateOrg,required: true, message: '请选择', trigger: 'change' }],
      },
}

修改验证规则，PS：如果没有用再额外调用this.$refs.ruleForm.validate(() => {});

其他vue功能记录

1、快速构建vite+vue3+ts项目命令

npm init @vitejs/app my-vue-app --template vue-ts

2、vue-cli 查看打包体积可视化命令

特别提示，不需要安装webpack-bundle-analyzer这个插件

 只需要在vue.config.js里面配置一项"report": "vue-cli-service build --report"，这个命令就可以了，它会在dist里面生成一个report.html文件，直接打开访问可查看

"report": "vue-cli-service build --report" 

3、vue新开页面（浏览器重新打开页面）

 
let pathData=this.$router.resolve({
   path: '/xxx/xxx', 
   query: {
      id:''
   }
})
window.open(pathData.href,'_blank')

4、服务器webpack打包压缩

4.1、vue2的webpack打包压缩

npm install -D compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin")

module.exports = {
  configureWebpack:{
    plugins: [
      new CompressionWebpackPlugin(),
    ],
  },
}

4.2、基于vite的webpack打包压缩

npm install -D vite-plugin-compression

import viteCompression from "vite-plugin-compression";

export default  ({ command, mode }) =>{
  return defineConfig({
     plugins: [
      viteCompression(),
    ],
  })
})

4.3、nginx配置

/**找到nginx的目录**/

// 找到对应目录地址
cd /usr/local/nginx/conf
// 编辑配置
vi nginx.conf

/**修改配置**/

gzip on;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;

/**重启nginx**/

// 在sbin目录下面启动
./nginx -s reload