Vue3에서 개발 효율성을 높일 수 있는 5가지 작은 지식 [정리 및 공유]

이 글은 Vue3 개발에 대해 이야기하고, 개발 효율성을 향상시킬 수 있는 5가지 작은 지식을 정리하고 공유하며, Vue3 프로젝트 개발을 보다 원활하게 만드는 데 도움이 되기를 바랍니다.

저는 최근 Vue3 + Vite2를 만지작거리면서 많은 문제에 직면했습니다. 개발 효율성을 높이고 Vue3 프로젝트 개발을 더욱 원활하게 만들 수 있는 5가지 팁을 정리했습니다.

1. 설정 이름 향상

Vue3의 setup 구문 설탕은 좋지만 setup 구문을 사용하면 첫 번째 문제는 name을 사용자 정의할 수 없다는 점인데, keep-alive를 사용할 때 이 문제를 해결하려면 name이 필요한 경우가 많습니다. 우리는 일반적으로 문제를 해결하기 위해 두 가지를 작성합니다. 하나는 setup을 사용하고 다른 하나는 script 태그를 사용하지 않지만 이는 확실히 충분히 우아하지 않습니다. Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。

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

这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接在script标签上定义name。

安装

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

配置

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

使用

<script setup name="OrderList">
import { onMounted } from &#39;vue&#39;

onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

二、API 自动导入

setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。

我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。

安装

npm i unplugin-auto-import -D

配置

// 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']
    })
  ]
})

安装配置完会自动生成auto-imports.d.ts文件。

// 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 {}

使用

<script setup name="OrderList">
// 不用import，直接使用ref
const count = ref(0)

onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

上面我们在vite.config.ts的配置里只导入了vue，imports: ['vue']，除了vue的你也可以根据文档导入其他的如vue-router、vue-use等。

个人建议只对一些比较熟悉的API做自动导入，如vue的API我们在开发时都比较熟悉，闭着眼都能写出来，对于一些不大熟悉的像VueUse这种库，还是使用import更好一些，毕竟编辑器都有提示，不易写错。

解决<span style="font-size: 16px;">eslint</span>报错问题

在没有import的情况下使用会导致eslint提示报错，可以通过在eslintrc.js安装插件**vue-global-api**解决。

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

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

三、告别.value

众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受.

let count = ref(1)

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

后来尤大大也提交了一份新的ref语法糖提案。

ref: count = 1

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

该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。

这里我介绍的是另外一种写法，也是官方后来出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

开启之后可以这样写：

let count = $ref(1)

const addCount = () => {
  count++
}

该语法糖根据不同的版本配置也略有不同，下面贴一下我自己所用相关插件的版本：

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

四、自动导入图片

在Vue2时我们经常会这样引用图片：

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

但在Vite中不支持require了，引用图片变成了下面这样：

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

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

每次使用图片都得import，显然耽误了大家摸鱼的时间，这时我们可以借助vite-plugin-vue-images来实现自动导入图片。

安装

npm i vite-plugin-vue-images -D

配置

// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

使用

<template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>

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

五、忽略.vue后缀

相信很多人在Vue2开发时，导入文件都是忽略.vue后缀的。但在Vite

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

이때 vite-plugin-vue-setup-extend 플러그인의 도움으로 두 개의 스크립트를 작성하지 않고도 이 문제를 더 우아하게 해결할 수 있습니다. > 태그를 사용하면 script 태그에서 name을 직접 정의할 수 있습니다.

설치

🎜

// vite.config.ts
import { defineConfig } from 'vite'

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

🎜🎜구성🎜🎜rrreee🎜🎜🎜🎜rrreee🎜🎜2.API 자동 가져오기🎜🎜🎜setup 구문을 사용하면 더 이상 변수와 메서드를 추가할 필요가 없습니다. 하나씩 return이 해제되면 템플릿에서 사용할 수 있으므로 손이 크게 자유로워집니다. 그러나 ref, computed, watch 등과 같이 일반적으로 사용되는 일부 Vue API의 경우에는 여전히 페이지에서 수동으로 가져오기를 수행하세요. 🎜🎜unplugin-auto-import를 통해 자동 가져오기를 구현할 수 있으며, import 없이 파일에서 Vue API를 사용할 수 있습니다. 🎜🎜🎜설치🎜🎜rrreee🎜🎜구성🎜🎜rrreee🎜설치 구성 auto-imports.d.ts 파일은 완료 후 자동으로 생성됩니다. 🎜rrreee🎜🎜사용🎜🎜rrreee🎜위에서는 vite.config.ts vue 구성에서 만 가져왔습니다. , imports: ['vue'], vue 외에도 문서에 따라 vue- 라우터, vue-use 등 🎜🎜개인적으로는 vue API처럼 익숙한 일부 API만 자동으로 가져오는 것이 좋습니다. 우리 모두 개발 중에 익숙하므로 눈을 감고도 작성할 수 있습니다. VueUse와 같은 라이브러리의 경우 import를 사용하는 것이 좋습니다. 결국 편집기에는 프롬프트가 있으므로 실수하기가 쉽지 않습니다. 🎜🎜🎜해결<span style="font-size: 16px;">eslint</span>오류 보고 문제🎜🎜🎜import 없이 사용하면 eslint에서 오류 메시지가 표시됩니다. eslintrc.js문제를 해결하려면 **vue-global-api** 플러그인을 설치하세요. 🎜rrreee🎜🎜3. .value는 안녕🎜🎜🎜우리 모두 알고 있듯이 ref에서는 변수에 액세스할 때 .value를 추가해야 하므로 많은 개발자가 불편함을 느낍니다. 🎜rrreee 🎜나중에 You Dada도 새로운 ref 구문 설탕 제안을 제출했습니다. 🎜rrreee🎜이 제안은 나오자마자 커뮤니티에서 많은 논의를 불러일으켰습니다. 시간이 많이 흘러서 여기서는 더 이상 이 주제에 대해 말도 안되는 이야기를 하지 않겠습니다. 🎜🎜여기서 또 다른 작성 방법을 소개합니다. 이는 나중에 공식 솔루션이기도 합니다. ref 앞에 $를 추가하세요. 이 기능은 기본적으로 꺼져 있으므로 켜야 합니다. 수동으로. . 🎜rrreee🎜켜고 나면 다음과 같이 쓸 수 있습니다: 🎜rrreee🎜이 구문 설탕의 구성은 버전에 따라 약간 다릅니다. 아래에 제가 사용하는 관련 플러그인의 버전을 게시하겠습니다. 🎜rrreee🎜🎜 4. Vue2에서는 자동으로 사진 가져오기 🎜🎜🎜, 우리는 종종 다음과 같은 이미지를 인용합니다: 🎜rrreee🎜 하지만 Vite에서는 require가 그렇지 않습니다. 지원되며 인용된 이미지는 다음과 같습니다. 🎜 rrreee🎜 이미지를 사용할 때마다 가져오기를 해야 하는데, 이로 인해 모든 사람이 낚시하는 시간이 분명히 지연됩니다. 이때 를 사용할 수 있습니다. vite-plugin-vue-images를 사용하여 이미지를 자동으로 가져옵니다. 🎜🎜🎜설치🎜🎜rrreee🎜🎜구성🎜🎜rrreee🎜🎜사용🎜🎜rrreee🎜🎜5. .vue 접미사를 무시하세요🎜🎜🎜많은 사람들이 Vue2를 개발할 때 파일을 가져오는 것으로 알고 있습니다. .vue 접미사. 하지만 Vite에서는 .vue 접미사를 무시하면 오류가 발생합니다. 🎜rrreee🎜 You Dada의 답변에 따르면 접미사 작성 요구 사항은 실제로 의도적으로 이런 식으로 설계되었습니다. 즉, 모든 사람이 이렇게 작성하도록 권장됩니다. 🎜🎜하지만 정말 글을 쓰고 싶지 않다면 공식 지원이 제공됩니다. 🎜

// vite.config.ts
import { defineConfig } from 'vite'

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

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

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

感谢

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

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

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

위 내용은 Vue3에서 개발 효율성을 높일 수 있는 5가지 작은 지식 [정리 및 공유]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!