5 sedikit pengetahuan yang boleh meningkatkan kecekapan pembangunan dalam Vue3 [disusun dan dikongsi]

Artikel ini akan bercakap tentang pembangunan Vue3 dan berkongsi 5 petua yang boleh meningkatkan kecekapan pembangunan dan menjadikan anda lebih lancar dalam pembangunan projek Vue3. Saya harap ia akan membantu semua orang!

Saya baru-baru ini bermain-main dengan Vue3 Vite2 dan menghadapi banyak masalah. Saya menyusun 5 petua yang boleh meningkatkan kecekapan pembangunan dan menjadikan anda lebih lancar dalam pembangunan projek Vue3 .

1. Sediakan peningkatan nama gula sintaks

Vue3setup adalah perkara yang baik, tetapi masalah pertama yang disebabkan oleh penggunaan sintaks setup adalah name tidak boleh disesuaikan, dan apabila kita menggunakan keep-alive kita sering memerlukan name Untuk menyelesaikan masalah ini biasanya menulis dua script tag, satu menggunakan setup dan satu tidak, tetapi ini tidak dapat dielakkan. 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 pemalam vite-plugin-vue-setup-extend, kami boleh menyelesaikan masalah ini dengan lebih elegan daripada menulis dua tag script, kami boleh menentukan terus script teg name.

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. API secara automatik mengimport

setup sintaks supaya kita tidak mempunyai untuk melaluinya satu demi satu Setelah pembolehubah dan kaedah return keluar, ia boleh digunakan pada templat, yang sangat membebaskan tangan kita. Walau bagaimanapun, untuk beberapa VueAPI yang biasa digunakan, seperti ref, computed, watch, dll., kami masih perlu melaksanakan import secara manual pada halaman setiap kali.

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

Pasang

npm i unplugin-auto-import -D

Konfigurasikan

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

Fail auto-imports.d.ts 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 vite.config.ts, vue dalam konfigurasi imports: ['vue'] , selain vue, anda juga boleh mengimport yang lain seperti vue-router, vue-use, dsb. mengikut dokumen.

Secara peribadi, adalah disyorkan untuk mengimport hanya beberapa API biasa Sebagai contoh, kami biasa dengan API vue semasa pembangunan dan boleh menulisnya dengan mata tertutup Untuk sesetengah API yang tidak dikenali seperti VueUse Untuk perpustakaan jenis ini, lebih baik menggunakan import Lagipun, editor mempunyai gesaan dan tidak mudah untuk membuat kesilapan.

Diselesaikan<span style="font-size: 16px;">eslint</span>eslintmasalah pelaporan ralat

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

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    'vue-global-api'
  ]
}

3. Farewell.value

Seperti yang kita semua tahu, ref memerlukan kami menambah .value apabila mengakses pembolehubah, yang membuatkan ramai pembangun berasa berasa gembira. tidak selesa.

let count = ref(1)

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

Kemudian, You Dada turut menyerahkan cadangan gula sintaks ref yang 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. ref$

Selepas menghidupkannya, anda boleh menulis seperti ini:

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

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

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

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"

4 Import gambar secara automatik

Kami sering memetik gambar seperti ini apabila

:

Vue2<.>Tetapi apabila

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

tidak disokong dalam , dan imej yang dipetik menjadi seperti berikut:

ViterequireSetiap kali anda menggunakan imej, anda perlu

, yang jelas melambatkan semua orang masa untuk memancing Pada masa ini, kita boleh menggunakan

<template>
  <img :src="Logo" />
</template>

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

Untuk mengimport imej secara automatik.

importvite-plugin-vue-images

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

5. Abaikan akhiran .vue

<template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>

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

Saya percaya ramai orang menggunakan apabila membangunkan Fail yang diimport mengabaikan akhiran .vue. Tetapi dalam

, mengabaikan akhiran .vue akan menyebabkan ralat.

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

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

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

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

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

感谢

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

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

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

Atas ialah kandungan terperinci 5 sedikit pengetahuan yang boleh meningkatkan kecekapan pembangunan dalam Vue3 [disusun dan dikongsi]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!