Vue3の開発効率を上げる5つの豆知識【整理・共有】

この記事では、Vue3 開発について説明し、開発効率を向上させ、Vue3 プロジェクトの開発をスムーズにするための 5 つの豆知識を整理して共有します。

最近 Vue3 Vite2 をいじっていて、多くの問題に遭遇しました。開発効率を向上させ、Vue3 プロジェクト開発をより合理化できる 5 つのヒントをまとめました。 。

1. セットアップ名

Vue3 の setup 構文シュガーの強化は良いことですが、 # を使用してください##setup 構文によって引き起こされる最初の問題は、name をカスタマイズできないことです。keep-alive を使用する場合、多くの場合、解決するために name が必要になります。この問題は通常、2 つの script タグ (1 つは setup を使用し、もう 1 つは使用しない) を記述することで解決されますが、これは明らかに十分にエレガントではありません。

<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 を利用することで、2 つの スクリプト#を書かなくても、この問題をよりエレガントに解決できます。 ## タグ。name を script タグに直接定義します。

#インストール

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

<span style="font-size: 16px;"></span>

<script setup name="OrderList">
import { onMounted } from &#39;vue&#39;

onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

<span style="font-size: 16px;"></span> 2. API 自動インポート

setup 構文を使用すると、変数を 1 つずつ保存できます。メソッドと

return

は、リリースされるとすぐにテンプレートで使用できるため、手が大幅に解放されます。ただし、ref、computed、watch など、一般的に使用される一部の VueAPI については、手動で設定する必要があります。毎回ページに表示されます。 import に進みます。 unplugin-auto-import を通じて自動インポートを実現でき、

import

を使用せずにファイル内で Vue API を使用できます。 #インストール

npm i unplugin-auto-import -D

<span style="font-size: 16px;"></span>構成

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

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 などの他のものもインポートできます。 、 vue-use など。 個人的には、使い慣れた API のみを自動的にインポートすることをお勧めします。たとえば、開発中に vue API については誰もがよく知っており、目を閉じていても記述できます。一部の馴染みのない API については、 VueUse

のようなライブラリの場合は、

import を使用することをお勧めします。結局のところ、エディタにはプロンプトがあり、間違いを犯すのは簡単ではありません。 解決策

eslint<span style="font-size: 16px;"></span>エラー報告の問題<span style="font-size: 16px;"></span>ある場合noimport を使用すると、eslint

にエラーが表示されます。プラグインは

eslintrc.js**vue-global-api にインストールできます。 **＃＃＃ 解決する。 <pre class='brush:php;toolbar:false;'>// 安装依赖 npm i vue-global-api -D // eslintrc.js module.exports = { extends: [ &amp;#39;vue-global-api&amp;#39; ] }</pre>3. Farewell.valueご存知のとおり、

ref

では、アクセス時に .value を追加する必要があります。

let count = ref(1)

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

その後、Youda は新しい ref 構文シュガーの提案も提出しました。 <pre class='brush:php;toolbar:false;'>ref: count = 1 const addCount = () =&gt; { count += 1 }</pre> この提案は、発表されるやいなや、コミュニティで多くの議論を巻き起こしましたが、かなり時間が経ちましたので、ここではこれ以上このトピックについてくだらない話はやめておきます。

ここで紹介するのは別の書き方で、後ほど正式な解決策にもなりますので、ref の前に

$

を追加してください。この機能はデフォルトでオフになっています。手動でオンにする必要があります。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

これをオンにした後、次のように書くことができます: <pre class='brush:php;toolbar:false;'>let count = $ref(1) const addCount = () =&gt; { count++ }</pre>この構文シュガーの構成はバージョンによって若干異なります。関連するプラグインのバージョンは次のとおりです。使用: <pre class='brush:php;toolbar:false;'>&quot;vue&quot;: &quot;^3.2.2&quot;, &quot;@vitejs/plugin-vue&quot;: &quot;^1.9.0&quot;, &quot;@vue/compiler-sfc&quot;: &quot;^3.2.5&quot;, &quot;vite&quot;: &quot;^2.6.13&quot;</pre>

4. 画像を自動的にインポートする

Vue2

では、よく次のような画像を引用します:

<img  src="/static/imghwm/default1.png"  data-src="require(&#39;@/assets/image/logo.png&#39;)"  class="lazy"  : / alt="Vue3の開発効率を上げる5つの豆知識【整理・共有】" >

しかし、

Vite

require は ではサポートされていないため、参照されるイメージは次のようになります:

<template>
  <img  src="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3の開発効率を上げる5つの豆知識【整理・共有】" >
</template>

<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

画像を使用するたびに、import## を行う必要があります。 # これは明らかに全員の釣りの時間を遅らせます。現時点では、vite-plugin-vue-images を使用して画像を自動的にインポートできます。

#インストール<pre class='brush:php;toolbar:false;'>npm i vite-plugin-vue-images -D</pre>

#構成

// 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="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3の開発効率を上げる5つの豆知識【整理・共有】" >
</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']
  }
})

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

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

感谢

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

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

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

以上がVue3の開発効率を上げる5つの豆知識【整理・共有】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。