Ajar anda 5 mata pengetahuan untuk menjadikan pembangunan Vue3 lebih lancar

Artikel ini membawa anda pengetahuan tentang pembangunan dalam Vue, dan menyusun 5 petua yang boleh meningkatkan kecekapan pembangunan, menjadikan pembangunan projek Vue3 anda lebih lancar dan lancar.

1. Penambahbaikan nama persediaan

gula sintaks persediaan Vue3 adalah perkara yang baik, tetapi masalah pertama yang disebabkan oleh penggunaan sintaks persediaan ialah ia tidak boleh disesuaikan nama, dan apabila kita menggunakan keep-alive, kita sering memerlukan nama Masalah ini biasanya diselesaikan dengan menulis dua tag skrip, satu menggunakan persediaan dan satu tidak menggunakannya, tetapi ini pastinya tidak cukup elegan.

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

Pada masa ini, dengan bantuan plug-in vite-plugin-vue-setup-extend, kami boleh menyelesaikan masalah ini dengan lebih elegan Daripada menulis dua tag skrip, kami boleh menentukan secara langsung nama pada tag skrip.

Pasang

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

Konfigurasikan

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

Gunakan

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

2. Import automatik API

Sintaks persediaan membolehkan kami menggunakan pembolehubah dan kaedah pada templat tanpa mengembalikannya satu demi satu, yang sangat membebaskan tangan kami. Walau bagaimanapun, untuk beberapa VueAPI yang biasa digunakan, seperti ref, dikira, jam tangan, dll., kami masih perlu mengimportnya secara manual pada halaman setiap kali.

Kami boleh merealisasikan import automatik melalui unplugin-auto-import dan menggunakan API Vue dalam fail tanpa mengimport.

Pemasangan

npm i unplugin-auto-import -D

Konfigurasi

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

Autoimports.d akan dijana secara automatik selepas pemasangan dan konfigurasi.

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

Gunakan

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

Di atas kami hanya mengimport vue dalam konfigurasi vite.config.ts, import: ['vue'], kecuali Untuk vue, anda juga boleh mengimport yang lain seperti vue-router, vue-use, dsb. mengikut dokumentasi.

Secara peribadi, disyorkan untuk mengimport beberapa API biasa sahaja secara automatik Sebagai contoh, kami sudah biasa dengan API Vue semasa pembangunan dan boleh menulisnya dengan mata tertutup Untuk sesetengah perpustakaan yang tidak dikenali seperti VueUse, Adalah lebih baik untuk menggunakan import Lagipun, editor mempunyai gesaan dan tidak mudah untuk membuat kesilapan.

Selesaikan masalah pelaporan ralat eslint

Menggunakannya tanpa import akan menyebabkan eslint menggesa pelaporan ralat, yang boleh diselesaikan dengan memasang pemalam **vue-global-api** dalam eslintrc.js.

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

3. Selamat tinggal kepada .value

Seperti yang kita sedia maklum, ref memerlukan kita menambah .value apabila mengakses pembolehubah, yang membuatkan ramai pembangun berasa tidak selesa.

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

Kemudian, You Dada juga menyerahkan cadangan gula sintaksis ref baharu.

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

Cadangan ini menimbulkan banyak perbincangan dalam masyarakat sebaik sahaja ia keluar, jadi saya tidak akan bercakap kosong mengenai topik ini di sini.

Di sini saya memperkenalkan cara penulisan yang lain, yang juga merupakan penyelesaian rasmi kemudiannya.

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

Selepas menghidupkannya, anda boleh menulis seperti ini:

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

Konfigurasi gula sintaksis ini berbeza sedikit mengikut versi yang berbeza pemalam yang saya gunakan:

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

4 Import imej secara automatik

Dalam Vue2 kami sering merujuk imej seperti ini:

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

Tetapi keperluan tidak disokong dalam. Vite, dan imej yang dirujuk menjadi Ia kelihatan seperti ini:

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

Setiap kali anda menggunakan imej, anda perlu mengimportnya, yang jelas melambatkan masa memancing semua orang Pada masa ini, kita boleh menggunakan vite-. plugin-vue-images untuk mengimport imej secara automatik.

Rasanya hebat, tetapi konflik berubah-ubah cenderung berlaku, jadi gunakan dengan berhati-hati!

Pasang

npm i vite-plugin-vue-images -D

Konfigurasikan

// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

Gunakan

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

5. Abaikan akhiran .vue

Saya percaya ramai orang mengabaikan akhiran .vue apabila mengimport fail semasa membangunkan Vue2. Tetapi dalam Vite, mengabaikan akhiran .vue akan menyebabkan ralat.

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

Menurut jawapan You Dada, keperluan untuk menulis akhiran sebenarnya sengaja direka dengan cara ini, iaitu semua orang digalakkan untuk menulis dengan cara ini.

Tetapi jika anda benar-benar tidak mahu menulis, sokongan rasmi disediakan.

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

Perlu diperhatikan di sini bahawa semasa mengkonfigurasi sambungan secara manual, ingat untuk menambah akhiran jenis fail lain, kerana jenis fail lain seperti js boleh mengabaikan import akhiran secara lalai tidak menambahnya, jenis fail lain boleh diimport. Import menjadi perlu untuk menambah akhiran.

Walaupun anda boleh melakukan ini, bagaimanapun, dokumen rasmi mengatakan bahawa adalah tidak disyorkan untuk mengabaikan akhiran .vue, jadi anda disyorkan untuk tetap menulis .vue secara jujur ​​dalam pembangunan sebenar.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Ajar anda 5 mata pengetahuan untuk menjadikan pembangunan Vue3 lebih lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!