Bringen Sie Ihnen 5 Wissenspunkte bei, um die Vue3-Entwicklung reibungsloser zu gestalten

Dieser Artikel vermittelt Ihnen Wissen über die Entwicklung in Vue und stellt 5 Tipps zusammen, die die Entwicklungseffizienz verbessern und die Entwicklung Ihres Vue3-Projekts immer reibungsloser machen können. Ich hoffe, dass er für alle hilfreich ist.

1. Verbesserung des Setup-Namens

Der Setup-Syntax-Zucker von Vue3 ist eine gute Sache, aber das erste Problem, das durch die Verwendung der Setup-Syntax verursacht wird, besteht darin, dass der Name nicht angepasst werden kann, und wenn wir Keep-Alive verwenden, benötigen wir oft einen Dieses Problem wird normalerweise durch das Schreiben von zwei Skript-Tags gelöst, eines mit Setup und eines nicht, aber das ist definitiv nicht elegant genug.

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

Mit Hilfe des Plug-Ins vite-plugin-vue-setup-extend können wir dieses Problem eleganter lösen, anstatt zwei Skript-Tags zu schreiben, können wir den Namen direkt auf dem Skript-Tag definieren .

Installation

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

Konfiguration

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

Verwendung

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

2. Die API-Syntax für den automatischen Import ermöglicht es uns, sie auf der Vorlage zu verwenden, ohne Variablen und Methoden einzeln zurückzugeben unsere Hände. Für einige häufig verwendete VueAPIs wie Ref, Computed, Watch usw. müssen wir sie jedoch jedes Mal manuell auf die Seite importieren.

Wir können einen automatischen Import durch Unplugin-Auto-Import realisieren, und Sie können die Vue-API in der Datei verwenden, ohne sie zu importieren.

Installation

npm i unplugin-auto-import -D

Konfiguration

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

Die Datei auto-imports.d.ts wird nach der Installation und Konfiguration automatisch generiert.

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

Verwenden Sie

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

Oben haben wir nur Vue in die Konfiguration von vite.config.ts importiert, Importe: ['vue']. ​​​​Zusätzlich zu Vue können Sie auch andere importieren, z. B. Vue-Router und vue gemäß der Dokumentation.

Persönlich wird empfohlen, nur einige bekannte APIs automatisch zu importieren. Beispielsweise sind wir mit der Vue-API während der Entwicklung vertraut und können sie mit geschlossenen Augen schreiben. Für einige unbekannte Bibliotheken wie VueUse ist es besser, den Import zu verwenden. Es ist besser, schließlich verfügt der Editor über Eingabeaufforderungen, sodass es nicht leicht ist, Fehler zu machen.

Lösung des Problems der Eslint-Fehlerberichterstattung

Die Verwendung ohne Import führt dazu, dass Eslint eine Fehlermeldung auslöst. Dies kann durch die Installation des Plug-Ins **vue-global-api** in eslintrc.js gelöst werden.

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

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.

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

Später hat You Dada auch einen neuen Ref-Syntax-Zuckervorschlag eingereicht.

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

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.

Was ich hier vorstelle, ist eine andere Schreibweise, die später auch eine offizielle Lösung ist. Fügen Sie $ vor Ref hinzu. Diese Funktion ist standardmäßig deaktiviert und muss manuell aktiviert werden.

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

Nach dem Einschalten können Sie Folgendes schreiben:

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

Die Konfiguration dieses Syntaxzuckers unterscheidet sich je nach Version geringfügig. Hier ist die Version des relevanten Plug-Ins, das ich verwende:

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

4 Bilder importieren

In Vue2 werden Bilder oft so zitiert:

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

Aber require wird in Vite nicht unterstützt. Die Bildreferenz lautet wie folgt:

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

Jedes Mal, wenn Sie das Bild verwenden, müssen Sie es importieren, was natürlich der Fall ist verzögert die Zeit aller zum Angeln. Zu diesem Zeitpunkt können wir vite-plugin-vue-images verwenden, um Bilder automatisch zu importieren.

Erfrischend, aber es kann leicht zu Variablenkonflikten kommen, also mit Vorsicht verwenden!

Installation: Entwicklung von Vue2. In Vite führt das Ignorieren des Suffixes .vue jedoch zu einem Fehler.

npm i vite-plugin-vue-images -D

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'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

Hier ist zu beachten, dass Sie beim manuellen Konfigurieren von Erweiterungen daran denken müssen, das Suffix anderer Dateitypen hinzuzufügen, da andere Dateitypen wie js den Suffiximport standardmäßig ignorieren können von anderen Dateitypen wird ein Suffix hinzugefügt.

Obwohl Sie dies tun können, heißt es in der offiziellen Dokumentation schließlich, dass es nicht empfohlen wird, das .vue-Suffix zu ignorieren. Daher wird empfohlen, .vue in der tatsächlichen Entwicklung immer noch ehrlich zu schreiben.

【Verwandte Empfehlung: „vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen 5 Wissenspunkte bei, um die Vue3-Entwicklung reibungsloser zu gestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!