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 .
Vue3
setup
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 'vue' export default defineComponent({ name: 'OrderList' }) </script> <script setup> onMounted(() => { console.log('mounted===') }) </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 'vue' onMounted(() => { console.log('mounted===') }) </script>
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 Vue
API 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('mounted===') }) </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
import
tanpa< Menggunakannya di bawah 🎜> 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' ] }
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
$
// 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
<. 🎜>Tetapi apabila
<img :src="require('@/assets/image/logo.png')" />
Vite
require
Setiap kali anda menggunakan imej, anda perlu
<template> <img :src="Logo" /> </template> <script setup> import Logo from '@/assets/image/logo.png' </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'] // 指明图片存放目录 }) ] })
5. Abaikan akhiran .vue
<template> <!-- 直接使用 --> <img :src="Logo" /> </template> <script setup> // import Logo from '@/assets/image/logo.png' </script>
Vue2
Vite
Menurut 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
// 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!