Summary 1, related summary of vue series

Table of contents

vue series

vue record (vue2-vue3)

 1, vue2, vue3 global communication

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 record

1. The vue-router parameter changes when the query jumps, and the page does not update the method

element records

1. How to trigger image preview (make a note)

2. Solve the problem that the nested el-image level in the element-ui component table is too low

3. The element-form form is submitted for verification, and the unfilled item page rolls back to the unfilled item when saving

4. The el-cascader of the element-form form cannot pass the validate verification after modifying the data

Other vue function records

1. Quickly build the command of vite+vue3+ts project

2. vue-cli view packaging volume visualization command

3. Vue opens a new page (browser reopens the page)

4. Server webpack packs and compresses

---

vue series

vue record (vue2-vue3)

1, vue2, vue3 global communication

• Vue2.x uses EventBus for component communication, and Vue3.x recommends it mitt.js.

 1. Install mitt

npm install --save mitt

2. Use in the project

2.1. Hang to the global in main.js

import mitt from 'mitt'

const app = createApp(App)

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

2.2. Encapsulate a public method and create a new bus.js in the utils file

//bus.js

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

The business module uses:

Send page, business page call method

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

import bus from '/utils/bus.js'

//通过on监听/emit触发

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

 Receive page (common component page)

//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: Refer to mitt-npm

method name	effect
on	Register a listening event for receiving data
emit	Call method to initiate data transfer
off	Used to remove listener events

onparameters:

parameter	type	effect
type	string | symbol	method name
handler	function	Callback function for what to do after receiving data

handlerIt is recommended to use named functions here , because anonymous functions cannot be destroyed.

emitparameters:

parameter	type	effect
type	string | symbol	The method name corresponding to on
data	any	Corresponding to on, the data that is allowed to be received

offparameters:

parameter	type	effect
type	string | symbol	The method name corresponding to on
handler	function	The name of the handler function corresponding to on to be deleted

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.

 Solution:

1. Installation dependencies

npm i default-passive-events -S

2. Introduce in the main.js file

import 'default-passive-events'

v-router record

1. The vue-router parameter changes when the query jumps, and the page does not update the method

1.1 Add a key value to the <router-view> tag, such as:

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

fullPath: URL encoding related to routing addresses. including  path,  query and hash

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

1.2 Listen to $router (not recommended, although the data is re-requested, but it is easy to use without adding a key to router-view)

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

element records

1. How to trigger image preview (make a note)

The first one: (support IE to use the components in the elementUi official website document) In general projects, you need to click the trigger event to view the big picture. The elementUi component library does not write the code that needs to be executed to trigger the trigger. Here, add this to the trigger method. $refs.preview.clickHandler() triggers the function of viewing the large image

The second type: (IE is not supported to use the el-image-viewer component, which comes with elementUi, but it may not be exposed in the official website document because it is not compatible with IE, so you don’t need to download the package to import it)

<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
    },
    }
} 

Original: elementUi previews the big picture through previewSrcList (two ways) - Sebastian Sauce - 博客园

2. Solve the problem that the nested el-image level in the element-ui component table is too low

Solution: Find this tag and copy this z-index to z-index:auto

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

3. The element-form form is submitted for verification, and the unfilled item page rolls back to the unfilled item when saving

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

4. The el-cascader of the element-form form cannot pass the validate verification after modifying the data

 <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' }],
      },
}

Modify the validation rules, PS: If it is not used, call this.$refs.ruleForm.validate(() => {});

Other vue function records

1. Quickly build the command of vite+vue3+ts project

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

2. vue-cli view packaging volume visualization command

Special reminder, there is no need to install the webpack-bundle-analyzer plugin

 You only need to configure a "report" in vue.config.js: "vue-cli-service build --report", this command is fine, it will generate a report.html file in dist, directly open the access can Check

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

3. Vue opens a new page (browser reopens the page)

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

4. Server webpack packs and compresses

4.1, vue2's webpack packaging compression

npm install -D compression-webpack-plugin

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

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

4.2. Vite-based webpack packaging and compression

npm install -D vite-plugin-compression

import viteCompression from "vite-plugin-compression";

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

4.3, nginx configuration

/**Find the directory of nginx**/

// Find the corresponding directory address
cd /usr/local/nginx/conf
// Edit configuration
vi nginx.conf

/**Change setting**/

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;

/**Restart nginx**/

// Start ./nginx -s reload  under the sbin directory