Apprenez-vous 5 points de connaissances pour rendre le développement de Vue3 plus fluide

Cet article vous apporte des connaissances sur le développement dans Vue et compile 5 conseils qui peuvent améliorer l'efficacité du développement, rendant le développement de votre projet Vue3 de plus en plus fluide. J'espère qu'il sera utile à tout le monde.

1. Amélioration du nom de configuration

Le sucre de la syntaxe de configuration de Vue3 est une bonne chose, mais le premier problème causé par l'utilisation de la syntaxe de configuration est que le nom ne peut pas être personnalisé, et lorsque nous utilisons keep-alive, nous avons souvent besoin d'un name. Ce problème est généralement résolu en écrivant deux balises de script, une utilisant setup et une non, mais ce n'est certainement pas assez élégant.

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

À ce stade, avec l'aide du plug-in vite-plugin-vue-setup-extend, nous pouvons résoudre ce problème de manière plus élégante. Au lieu d'écrire deux balises de script, nous pouvons définir directement le nom sur la balise de script. .

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

Utilisation

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

2. La syntaxe d'importation automatique de l'API

setup nous permet de l'utiliser sur le modèle sans renvoyer les variables et les méthodes une par une. Cela libère considérablement. nos mains. Cependant, pour certaines VueAPI couramment utilisées, telles que ref, calculée, watch, etc., nous devons toujours les importer manuellement sur la page à chaque fois.

Nous pouvons réaliser une importation automatique via unplugin-auto-import, et vous pouvez utiliser l'API de Vue dans le fichier sans importer.

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

Le fichier auto-imports.d.ts sera automatiquement généré après l'installation et la configuration.

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

Utilisez

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

Ci-dessus nous avons importé uniquement vue dans la configuration de vite.config.ts, importers : ['vue'] ​​​​En plus de vue, vous pouvez également en importer d'autres comme vue-router. et vue selon la documentation -use etc.

Personnellement, il est recommandé de n'importer automatiquement que certaines API familières. Par exemple, nous connaissons l'API Vue lors du développement et pouvons l'écrire les yeux fermés. Pour certaines bibliothèques inconnues comme VueUse, il est préférable d'utiliser l'importation. C'est mieux, après tout, l'éditeur a des invites, donc ce n'est pas facile de faire des erreurs.

Résoudre le problème de rapport d'erreurs d'eslint

L'utiliser sans importation entraînera l'affichage d'un rapport d'erreur par eslint. Cela peut être résolu en installant le plug-in **vue-global-api** dans eslintrc.js.

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

3. Adieu à .value

Comme nous le savons tous, ref nous oblige à ajouter .value lors de l'accès aux variables, ce qui met de nombreux développeurs mal à l'aise.

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

Plus tard, You Dada a également soumis une nouvelle proposition de sucre de syntaxe de référence.

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

Cette proposition a suscité beaucoup de discussions dans la communauté dès sa sortie Cela fait longtemps, je ne dirai donc plus de bêtises sur ce sujet ici.

Ce que je présente ici est une autre façon d'écrire, qui est également une solution officielle plus tard. Ajoutez $ avant la réf. Cette fonction est désactivée par défaut et doit être activée manuellement.

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

Après l'avoir allumé, vous pouvez écrire comme ceci :

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

La configuration de ce sucre de syntaxe est légèrement différente selon les différentes versions Voici la version du plug-in concerné que j'utilise :

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

4. importer des images

Quand nous sommes dans Vue2 Les images sont souvent citées comme ceci :

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

Mais require n'est pas pris en charge dans Vite La référence de l'image devient la suivante :

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

Chaque fois que vous utilisez l'image, vous devez l'importer, ce qui retarde évidemment le temps de pêche de tout le monde. À ce stade, nous pouvons utiliser vite-plugin-vue-images pour importer automatiquement des images.

Rafraîchissant, mais des conflits variables sont susceptibles de se produire, alors utilisez-le avec prudence !

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'] // 指明图片存放目录
    })
  ]
})

Utilisation

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

5. Ignorez le suffixe .vue

Je crois que beaucoup de gens ignorent le suffixe .vue lors de l'importation de fichiers lors du développement de Vue2. Mais dans Vite, ignorer le suffixe .vue provoquera une erreur.

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

Selon la réponse de You Dada, l'obligation d'écrire des suffixes est en fait intentionnellement conçue de cette façon, c'est-à-dire que tout le monde est encouragé à écrire comme ça.

Mais si vous ne voulez vraiment pas écrire, le support officiel est fourni.

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

Il convient de noter ici que lors de la configuration manuelle des extensions, n'oubliez pas d'ajouter le suffixe des autres types de fichiers, car d'autres types de fichiers tels que js peuvent ignorer l'importation du suffixe par défaut. Si vous ne l'ajoutez pas, l'importation. d'autres types de fichiers deviendront nécessaires.

Bien que vous puissiez le faire, après tout, les documents officiels disent qu'il n'est pas recommandé d'ignorer le suffixe .vue, il est donc recommandé de toujours écrire .vue honnêtement dans le développement réel.

【Recommandation associée : "Tutoriel vue.js"】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!