Vue3開発をスムーズにする5つの知識ポイントを伝授

この記事では、Vue での開発に関する知識を提供し、開発効率を向上させ、Vue3 プロジェクトの開発をよりスムーズにするための 5 つの豆知識をまとめました。

1. セットアップ名の強化

Vue3 のセットアップ構文シュガーは良いものですが、セットアップ構文を使用することで生じる最初の問題は、カスタマイズできないことです。通常、この問題は 2 つのスクリプト タグを記述して、1 つはセットアップを使用し、もう 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 つのスクリプト タグを記述する代わりに、名前を直接定義できます。スクリプトタグに。

インストール

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>

2. API 自動インポート

setup 構文を使用すると、テンプレートの変数とメソッドを 1 つずつ返すことなく使用できるため、手が大幅に解放されます。ただし、ref、computed、watch などの一部の一般的に使用される VueAPI については、毎回手動でページにインポートする必要があります。

unplugin-auto-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({
       // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      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 に慣れているため、目を閉じていても記述できます。VueUse などの馴染みのないライブラリについては、その方が良いです。結局のところ、エディターにはプロンプトがあり、間違いを犯すのは簡単ではありません。

eslint エラー報告の問題の解決策

インポートせずに使用すると、eslint がエラー報告を要求します。これは、プラグイン **vue-global-api** をインストールすることで解決できます。 eslintrc.js 内。

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

3. .value とはさよなら

ご存知のとおり、ref では変数にアクセスするときに .value を追加する必要があるため、多くの開発者が不快に感じます。

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

This 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++
}

この構文シュガーの構成はバージョンによって若干異なります。関連するプラグインのバージョンは次のとおりです。 use:

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

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>

画像を使用するたびに、画像をインポートする必要があるため、全員が釣りをする時間が明らかに遅れます。現時点では、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="/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']
  }
})

js などの他の種類のファイルはデフォルトでサフィックスのインポートを無視する可能性があるため、拡張子を手動で設定する場合は、他の種類のファイルのサフィックスを忘れずに追加することに注意してください。他の種類のファイルのインポートは無視されるため、サフィックスを追加する必要があります。

これは可能ですが、公式ドキュメントには .vue 接尾辞を無視することは推奨されないと記載されているため、実際の開発では引き続き .vue を正直に記述することをお勧めします。

[関連する推奨事項:「vue.js チュートリアル 」]

以上がVue3開発をスムーズにする5つの知識ポイントを伝授の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。