5 little knowledge that can improve development efficiency in Vue3 [organized and shared]

This article will talk about Vue3 development, organize and share 5 little knowledge that can improve development efficiency, and make you smoother in Vue3 project development. I hope it will be helpful to everyone!

I recently tinkered with Vue3 Vite2 and encountered a lot of problems. I compiled 5 tips that can improve development efficiency and make you more streamlined in Vue3 project development. Slippery and smooth.

1. Setup name Enhancement of

Vue3's setup syntactic sugar is a good thing, but use setup The first problem caused by syntax is that name cannot be customized. When we use keep-alive, we often need name to solve this problem. This is usually solved by writing two script tags, one using setup and one not, 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 without writing two script tags. Define name directly 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 save variables one by one Both the methods and return can be used on the template as soon as they are released, which greatly frees up our hands. However, for some commonly used VueAPIs, such as ref, computed, watch, etc., we still need to manually configure it on the page every time Proceed to import.

We can achieve automatic import through unplugin-auto-import, and we can use the Vue API in the file without import.

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({
      // dts: 'src/auto-imports.d.ts', // 可以自定义文件生成的位置，默认是根目录下
      imports: ['vue']
    })
  ]
})

Installation and configuration completed Automatically generate the auto-imports.d.ts file.

// 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 in the configuration of vite.config.ts vue, imports: ['vue'], in addition to vue, you can also import others according to the documentation, such as vue-router, vue-use etc.

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

Solution<span style="font-size: 16px;">eslint</span>Error reporting problem

If there is no## Using #import will cause eslint to prompt an error. You can install the plug-in in eslintrc.js**vue-global-api** solve.

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    'vue-global-api'
  ]
}

3. Farewell.value

As we all know,

ref requires us to add .value when accessing variables. This made many developers feel uncomfortable.

let count = ref(1)

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

Later, Youda also submitted a new

ref syntax sugar proposal.

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. You need to Turn 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 in

Vite require is not supported in , and the referenced image becomes as follows:

<template>
  <img :src="Logo" />
</template>

<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

Every time you use the image, you have to

import, which obviously delays everyone's time to fish. At this time, we can use vite-plugin-vue-images to automatically import images.

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 import files when developing

Vue2 The .vue suffix is ​​ignored. 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']
  }
})

这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。

感谢

本次分享到这里就结束了，感谢您的阅读！予人玫瑰，手有余香，别忘了动动手指点个赞。

本文如果有什么错误或不足，也欢迎评论区指正！

【相关推荐：vue.js视频教程】

The above is the detailed content of 5 little knowledge that can improve development efficiency in Vue3 [organized and shared]. For more information, please follow other related articles on the PHP Chinese website!