Vue3 개발을 보다 원활하게 만들기 위한 5가지 지식 포인트를 가르쳐주세요.

이 기사는 Vue 개발에 대한 지식을 제공하고 개발 효율성을 향상시켜 Vue3 프로젝트 개발을 보다 원활하고 원활하게 만들 수 있는 5가지 팁을 모아 모든 사람에게 도움이 되기를 바랍니다.

1. 설정 이름 향상

Vue3의 설정 구문 설탕은 좋지만 설정 구문을 사용하면서 발생하는 첫 번째 문제는 이름을 사용자 정의할 수 없다는 것이고, 연결 유지를 사용할 때 종종 이 문제는 일반적으로 두 개의 스크립트 태그(하나는 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 플러그인의 도움으로 이 문제를 더 우아하게 해결할 수 있습니다. 스크립트 태그를 두 개 작성하는 대신 스크립트 태그에 이름을 직접 정의할 수 있습니다. .

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 자동 가져오기

설정 구문을 사용하면 변수와 메소드를 하나씩 반환하지 않고도 템플릿에서 사용할 수 있습니다. 우리 손. 그러나 ref, Computed, Watch 등과 같이 일반적으로 사용되는 일부 VueAPI의 경우 매번 페이지에서 수동으로 가져와야 합니다.

unplugin-auto-import를 통해 자동 가져오기를 구현할 수 있으며, 가져오지 않고도 파일에서 Vue의 API를 사용할 수 있습니다.

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

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

Use

<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와 같은 다른 항목도 가져올 수 있습니다. -use 등에 따라 vue하십시오.

개인적으로는 익숙한 일부 API만 자동으로 Import하는 것을 권장합니다. 예를 들어 개발 중에는 Vue API에 익숙하고 VueUse와 같이 익숙하지 않은 일부 라이브러리의 경우 Import를 사용하는 것이 좋습니다. 결국 편집자가 프롬프트를 제공하므로 실수하기가 쉽지 않다는 것이 더 좋습니다.

eslint 오류 보고 문제 해결

가져오기 없이 사용하면 eslint에서 오류 보고 메시지가 표시됩니다. 이 문제는 eslintrc.js에 **vue-global-api** 플러그인을 설치하여 해결할 수 있습니다.

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

3. .value는 안녕

우리 모두 알고 있듯이 ref에서는 변수에 액세스할 때 .value를 추가해야 하므로 많은 개발자가 불편함을 느낍니다.

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

나중에 You Dada도 새로운 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"

4. 이미지 가져오기

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>

사진을 사용할 때마다 가져와야 합니다. 이는 분명히 모든 사람의 낚시 시간을 지연시킵니다. 이때 vite-plugin-vue-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. .vue 접미사 무시

많은 사람들이 Vue2를 개발할 때 파일을 가져올 때 .vue 접미사를 무시한다고 생각합니다. 그러나 Vite에서는 .vue 접미사를 무시하면 오류가 발생합니다.

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

You Dada의 답변에 따르면 접미사 작성 요구 사항은 실제로 의도적으로 이런 식으로 설계되었습니다. 즉, 모든 사람이 이렇게 작성하도록 권장됩니다.

하지만 정말 글을 쓰고 싶지 않다면 공식 지원이 제공됩니다.

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

여기서 주의할 점은 확장 기능을 수동으로 구성할 때 다른 유형의 파일에 대한 접미사를 추가해야 한다는 점입니다. js와 같은 다른 유형의 파일은 기본적으로 접미사 가져오기를 무시할 수 있기 때문입니다. 다른 유형의 파일에 접미사가 추가됩니다.

이렇게 할 수도 있지만 결국 공식 문서에는 .vue 접미사를 무시하는 것은 권장하지 않는다고 나와 있으므로 실제 개발에서는 그래도 .vue를 솔직하게 작성하는 것이 좋습니다.

【관련 추천: "vue.js tutorial"】

위 내용은 Vue3 개발을 보다 원활하게 만들기 위한 5가지 지식 포인트를 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!