Teach you 5 knowledge points to make Vue3 development smoother

This article brings you knowledge about development in Vue, and compiles 5 little knowledge that can improve development efficiency, making your Vue3 project development smoother and smoother. I hope it will be helpful to everyone.

1. Setup name enhancement

Vue3’s setup syntax sugar is a good thing, but the first problem caused by using setup syntax is that it cannot be customized. name, and when we use keep-alive, we often need name. This problem is usually solved by writing two script tags, one using setup and one not using it, but this is definitely not elegant enough.

<script>
import { defineComponent, onMounted } from &#39;vue&#39;
export default defineComponent({
  name: &#39;OrderList&#39;
})
</script>
<script setup>
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

At this time, with the help of the plug-in vite-plugin-vue-setup-extend, we can solve this problem more elegantly. Instead of writing two script tags, we can directly define the name on the script tag.

Installation

npm i vite-plugin-vue-setup-extend -D

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

Use

<script setup name="OrderList">
import { onMounted } from &#39;vue&#39;
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

2. API automatic import

setup syntax allows us to use the variables and methods on the template without returning them one by one, which greatly frees up our hands. However, for some commonly used VueAPIs, such as ref, computed, watch, etc., we still need to manually import them on the page every time.

We can realize automatic import through unplugin-auto-import, and you can use Vue's API in the file without importing.

Installation

npm i unplugin-auto-import -D

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    AutoImport({
       // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      dts: 'src/auto-imports.d.ts',
      imports: ['vue']
    })
  ]
})

The auto-imports.d.ts file will be automatically generated after installation and configuration.

// auto-imports.d.ts
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const EffectScope: typeof import('vue')['EffectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  // ...
}
export {}

Use

<script setup name="OrderList">
// 不用import，直接使用ref
const count = ref(0)
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

Above we only imported vue in the configuration of vite.config.ts, imports: ['vue'], in addition to vue, you also You can import other ones such as vue-router, vue-use, etc. according to the documentation.

Personally, it is recommended to only automatically import some familiar APIs. For example, we are familiar with the vue API during development and can write it with our eyes closed. For some unfamiliar libraries like VueUse, It is better to use import. After all, the editor has prompts and it is not easy to make mistakes.

Solution to eslint error reporting problem

Using it without import will cause eslint to prompt an error reporting. This can be solved by installing the plug-in **vue-global-api** in eslintrc.js.

// 安装依赖
npm i vue-global-api -D
// eslintrc.js
module.exports = {
  extends: [
    'vue-global-api'
  ]
}

3. Farewell to .value

As we all know, ref requires us to add .value when accessing variables, which makes many developers feel uncomfortable.

let count = ref(1)
const addCount = () => {
  count.value += 1
}

This is especially true later. A new syntactic sugar proposal for ref was also submitted.

ref: count = 1
const addCount = () => {
  count += 1
}

This proposal caused a lot of discussion in the community as soon as it came out. It has been a long time, so I will no longer talk nonsense about this topic here.

What I introduce here is another way of writing, which is also an official solution later. Add $ before ref. This function is turned off by default and needs to be turned on manually.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

After turning it on, you can write like this:

let count = $ref(1)
const addCount = () => {
  count++
}

The configuration of this syntax sugar is slightly different according to different versions. Here is the version of the relevant plug-in I use:

"vue": "^3.2.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/compiler-sfc": "^3.2.5",
"vite": "^2.6.13"

4. Automatically import images

In Vue2 we often quote images like this:

<img :src="require(&#39;@/assets/image/logo.png&#39;)" />

But require is not supported in Vite, and the quoted images become the following:

<template>
  <img :src="Logo" />
</template>
<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

Every time you use an image, you have to import it, which obviously delays everyone's time to fish. At this time, we can use vite-plugin-vue-images to automatically import images.

It feels great, but variable conflicts are easy to occur, so use with caution!

Installation

npm i vite-plugin-vue-images -D

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

Use

<template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>
<script setup>
// import Logo from &#39;@/assets/image/logo.png&#39;
</script>

5. Ignore the .vue suffix

I believe many people ignore the .vue suffix when importing files when developing Vue2. But in Vite, ignoring the .vue suffix will cause an error.

import Home from '@/views/home' // error
import Home from '@/views/home.vue' // ok

According to You Dada’s answer, the requirement to write suffixes is actually deliberately designed this way, that is, everyone is encouraged to write like this.

But if you really don’t want to write, the official support is provided.

// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

It should be noted here that when configuring extensions manually, remember to add the suffix of other types of files, because other types of files such as js can ignore the suffix import by default. If you do not write it, the import of other types of files will be ignored. It becomes necessary to add a suffix.

Although this can be done, the official document says that it is not recommended to ignore the .vue suffix, so it is recommended that you still write .vue honestly in actual development.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of Teach you 5 knowledge points to make Vue3 development smoother. For more information, please follow other related articles on the PHP Chinese website!