5 kleine Kenntnisse, die die Entwicklungseffizienz in Vue3 verbessern können [organisiert und geteilt]

In diesem Artikel erfahren Sie mehr über die Vue3-Entwicklung, organisieren und teilen 5 kleine Kenntnisse, die die Entwicklungseffizienz verbessern und Sie bei der Vue3-Projektentwicklung reibungsloser machen können. Ich hoffe, dass er für alle hilfreich ist!

Ich habe kürzlich an Vue3 + Vite2 herumgebastelt und bin auf viele Probleme gestoßen. Ich habe 5 Tipps zusammengestellt, die die Entwicklungseffizienz verbessern und die Entwicklung Ihres Vue3-Projekts immer reibungsloser gestalten können.

1. Erweiterung des Setup-Namens

Die setup-Syntax von Vue3 ist eine gute Sache, aber die Verwendung der setup-Syntax bringt das mit sich 1. Das erste Problem besteht darin, dass name nicht angepasst werden kann. Wenn wir keep-alive verwenden, benötigen wir häufig name. Normalerweise schreiben wir zwei Um das Problem zu lösen, verwendet einer das Tag setup und der andere nicht das Tag script, aber das ist definitiv nicht elegant genug. 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

Mit Hilfe des Plug-ins vite-plugin-vue-setup-extend können wir dieses Problem eleganter lösen, ohne zwei Skripte</code zu schreiben >-Tags können wir <code>name direkt im script-Tag definieren.

Installation

🎜

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

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

🎜🎜Konfiguration🎜🎜rrreee🎜🎜< span style="font-size: 16px;">Verwenden🎜🎜rrreee🎜🎜2. API-Automatikimport🎜🎜🎜setup ermöglicht es uns, keine Variablen und Methoden mehr hinzuzufügen eins nach dem anderen Sobald return freigegeben ist, kann es für die Vorlage verwendet werden, was unsere Hände erheblich entlastet. Für einige häufig verwendete Vue-APIs wie ref, computed, watch usw. gilt dies jedoch weiterhin Sie müssen es jedes Mal tun. Führen Sie den import manuell auf der Seite durch. 🎜🎜Wir können den automatischen Import über unplugin-auto-import realisieren, und Sie können die Vue-API in der Datei ohne import verwenden. 🎜🎜🎜Installation🎜🎜rrreee🎜🎜Konfiguration🎜🎜rrreee🎜Installationskonfiguration Die Datei auto-imports.d.ts wird nach Abschluss automatisch generiert. 🎜rrreee🎜🎜Verwenden🎜🎜rrreee🎜Oben haben wir nur in die Konfiguration von <code>vite.config.ts vue importiert , imports: ['vue'], zusätzlich zu vue können Sie gemäß der Dokumentation auch andere importieren, z. B. vue- router , vue-use usw. 🎜🎜Persönlich wird empfohlen, nur einige bekannte APIs automatisch zu importieren, z. B. die API von vue. Wir sind alle während der Entwicklung damit vertraut und können sie mit geschlossenen Augen schreiben wie VueUse ist es besser, import zu verwenden. Schließlich verfügt der Editor über Eingabeaufforderungen und es ist nicht leicht, Fehler zu machen. 🎜🎜🎜Lösen<span style="font-size: 16px;">eslint</span>Problem bei der Fehlerberichterstattung🎜🎜🎜Die Verwendung ohne import führt dazu, dass eslint einen Fehler auslöst. Sie können ihn übergeben eslintrc.jsInstallieren Sie das Plug-in **vue-global-api**, um das Problem zu lösen. 🎜rrreee🎜🎜3. Abschied von .value🎜🎜🎜Wie wir alle wissen, erfordert ref, dass wir beim Zugriff auf Variablen .value hinzufügen, was vielen Entwicklern ein Unbehagen bereitet. 🎜rrreee 🎜Später hat You Dada auch einen neuen ref-Syntax-Zuckervorschlag eingereicht. 🎜rrreee🎜Dieser Vorschlag hat schon seit seiner Veröffentlichung in der Community für große Diskussionen gesorgt, deshalb werde ich hier keinen Unsinn mehr über dieses Thema reden. 🎜🎜Hier stelle ich eine andere Schreibweise vor, die später auch eine offizielle Lösung ist. Fügen Sie $ vor ref hinzu manuell. 🎜rrreee🎜Nach dem Einschalten können Sie Folgendes schreiben: 🎜rrreee🎜Die Konfiguration dieses Syntaxzuckers unterscheidet sich je nach Version geringfügig. Hier ist die Version des relevanten Plug-Ins, das ich verwende: 🎜rrreee🎜🎜4. Bilder automatisch importieren 🎜🎜🎜 in Vue2, wir zitieren oft Bilder wie dieses: 🎜rrreee🎜 Aber in Vite wird require nicht unterstützt, und die zitierten Bilder sehen so aus: 🎜 rrreee🎜Jedes Mal, wenn Sie ein Bild verwenden, müssen Sie importieren, was natürlich die Zeit aller zum Angeln verzögert. Zu diesem Zeitpunkt können wir vite- verwenden. plugin-vue-images zum automatischen Importieren von Bildern. 🎜🎜🎜Installation🎜🎜rrreee🎜🎜Konfiguration🎜🎜rrreee🎜🎜< span style="font-size: 16px;">Verwenden🎜🎜rrreee🎜🎜5. Ignorieren Sie das .vue-Suffix🎜🎜🎜Ich glaube, dass viele Leute beim Entwickeln von Vue2 Dateien importieren das .vue-Suffix. Aber in Vite führt das Ignorieren des .vue-Suffixes zu einem Fehler. 🎜rrreee🎜Laut der Antwort von You Dada ist die Anforderung, Suffixe zu schreiben, tatsächlich absichtlich so gestaltet, das heißt, jeder wird ermutigt, so zu schreiben. 🎜🎜Aber wenn Sie wirklich nicht schreiben möchten, steht Ihnen die offizielle Unterstützung zur Verfügung. 🎜

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

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

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

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

感谢

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

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

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

Das obige ist der detaillierte Inhalt von5 kleine Kenntnisse, die die Entwicklungseffizienz in Vue3 verbessern können [organisiert und geteilt]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!