5 petites connaissances qui peuvent améliorer l'efficacité du développement dans Vue3 [organisées et partagées]

Cet article vous parlera du développement de Vue3, organisera et partagera 5 petites connaissances qui peuvent améliorer l'efficacité du développement et vous faciliter le développement de projets Vue3. J'espère qu'il sera utile à tout le monde !

J'ai récemment bricolé Vue3 + Vite2 et j'ai rencontré de nombreux problèmes. J'ai compilé 5 conseils qui peuvent améliorer l'efficacité du développement et rendre le développement de votre projet Vue3 de plus en plus fluide.

1. Amélioration du nom de configuration

Le sucre de syntaxe setup de Vue3 est une bonne chose, mais l'utilisation de la syntaxe setup apporte le d'abord Le premier problème est que name ne peut pas être personnalisé, et lorsque nous utilisons keep-alive, nous avons souvent besoin de name Pour résoudre ce problème, nous en écrivons généralement deux. Pour résoudre le problème, l'un utilise setup et l'autre n'utilise pas la balise script, mais ce n'est certainement pas assez élégant. 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

À l'heure actuelle, avec l'aide du plug-in vite-plugin-vue-setup-extend, nous pouvons résoudre ce problème de manière plus élégante sans écrire deux script balises, on peut définir directement <code>name sur la balise script.

Installation

🎜

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

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

🎜🎜Configuration🎜🎜rrreee🎜🎜Utiliser🎜🎜rrreee🎜🎜2. La syntaxe d'importation automatique de l'API🎜🎜🎜setup nous permet de ne plus avoir à ajouter de variables et de méthodes. un par un Une fois return publié, il peut être utilisé sur le modèle, ce qui nous libère grandement les mains. Cependant, pour certaines API Vue couramment utilisées, telles que ref, computed, watch, etc., nous il faut le faire à chaque fois. Faites l'import manuellement sur la page. 🎜🎜Nous pouvons réaliser une importation automatique via unplugin-auto-import, et vous pouvez utiliser l'API Vue dans le fichier sans importer. 🎜🎜🎜Installation🎜🎜rrreee🎜🎜Configuration🎜🎜rrreee🎜Configuration de l'installation Le fichier auto-imports.d.ts sera automatiquement généré une fois terminé. 🎜rrreee🎜🎜Utiliser🎜🎜rrreee🎜Ci-dessus nous avons uniquement importé dans la configuration de <code>vite.config.ts vue , imports : ['vue'], en plus de vue, vous pouvez également en importer d'autres selon la documentation, comme vue- routeur , vue-use, etc. 🎜🎜Personnellement, il est recommandé de n'importer automatiquement que certaines API familières, comme l'API de vue. Nous la connaissons tous au cours du développement et pouvons l'écrire les yeux fermés pour certaines API inconnues. comme VueUse, il est préférable d'utiliser import Après tout, l'éditeur a des invites et il n'est pas facile de faire des erreurs. 🎜🎜🎜Résoudre<span style="font-size: 16px;">eslint</span>Problème de rapport d'erreur🎜🎜🎜L'utiliser sans import entraînera une erreur de eslint. Vous pouvez le transmettre. eslintrc.jsInstallez le plug-in **vue-global-api** pour résoudre le problème. 🎜rrreee🎜🎜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. 🎜rrreee 🎜Plus tard, You Dada a également soumis une nouvelle proposition de sucre de syntaxe ref. 🎜rrreee🎜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. 🎜🎜Ici, j'introduis une autre façon d'écrire, qui est également une solution officielle plus tard. Ajoutez $ avant ref. Cette fonction est désactivée par défaut et doit être activée. manuellement. 🎜rrreee🎜Après l'avoir allumé, vous pouvez écrire comme ceci : 🎜rrreee🎜La configuration de ce sucre syntaxique est légèrement différente selon les différentes versions. Je posterai ci-dessous la version du plug-in concerné que j'utilise : 🎜rrreee🎜🎜. 4. Importer automatiquement des images 🎜🎜🎜 dans Vue2, on cite souvent des images comme ceci : 🎜rrreee🎜 Mais dans Vite, require ne l'est pas pris en charge, et les images citées deviennent comme ceci : 🎜 rrreee🎜Chaque fois que vous utilisez une image, vous devez 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 les images. 🎜🎜🎜Installation🎜🎜rrreee🎜🎜Configuration🎜🎜rrreee🎜🎜Utiliser🎜🎜rrreee🎜🎜5. Ignorer le suffixe .vue🎜🎜🎜Je crois que beaucoup de gens importent des fichiers lors du développement de Vue2 Ignorer. le suffixe .vue. Mais dans Vite, ignorer le suffixe .vue provoquera une erreur. 🎜rrreee🎜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']
  }
})

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

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

感谢

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

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

【相关推荐：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!