這篇文章為大家帶來了關於vue中開發相關知識，整理了5個可以提高開發效率的小知識，讓你在 Vue3 的專案開發中更加絲滑、順暢，希望對大家有幫助。
Vue3的setup語法糖是個好東西，但使用setup語法帶來的第一個問題就是無法自訂name，而我們使用keep-alive往往是需要name的，解決這個問題通常是透過寫兩個script標籤來解決，一個使用setup，一個不使用，但這樣必然是不夠優雅的。
<script>
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
name: 'OrderList'
})
</script>
<script setup>
onMounted(() => {
console.log('mounted===')
})
</script>這時候借助插件vite-plugin-vue-setup-extend可以讓我們更優雅的解決這個問題，不用寫兩個script標籤，可以直接在script標籤上定義name。
安裝
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 'vue'
onMounted(() => {
console.log('mounted===')
})
</script>setup語法讓我們不用再一個的把變數和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對於一些常用的VueAPI，例如ref、computed、watch等，還是每次都需要我們在頁面上手動進行import。
我們可以透過unplugin-auto-import實作自動匯入，無需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 {}使用
<script setup name="OrderList">
// 不用import，直接使用ref
const count = ref(0)
onMounted(() => {
console.log('mounted===')
})
</script>上面我們在vite.config.ts的設定裡只導入了vue，imports: ['vue']，除了vue的你也可以依照文件導入其他的如vue-router、vue-use等。
個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發時都比較熟悉，閉著眼都能寫出來，對於一些不大熟悉的像VueUse這種庫，還是使用import比較好一些，畢竟編輯器都有提示，不容易寫錯。
在沒有import的情況下使用會導致eslint提示報錯，可以透過在eslintrc.js安裝外掛程式**vue-global-api**解決。
// 安装依赖
npm i vue-global-api -D
// eslintrc.js
module.exports = {
extends: [
'vue-global-api'
]
}眾所周知，ref要求我們存取變數時需要加上.value，這讓許多開發者覺得難受.
let count = ref(1)
const addCount = () => {
count.value += 1
}後來特別也提交了新的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++
}該語法糖根據不同的版本配置也略有不同，下面貼一下我自己所用相關插件的版本：
"vue": "^3.2.2", "@vitejs/plugin-vue": "^1.9.0", "@vue/compiler-sfc": "^3.2.5", "vite": "^2.6.13"
在Vue2時我們常常會這樣引用圖片：
<img :src="require('@/assets/image/logo.png')" />
但在Vite中不支援require了，引用圖片變成了下面這樣：
<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'] // 指明图片存放目录
})
]
})使用
<template> <!-- 直接使用 --> <img :src="Logo" /> </template> <script setup> // import Logo from '@/assets/image/logo.png' </script>
相信很多人在Vue2開發時，導入檔案都是忽略.vue後綴的。但在Vite裡，忽略.vue後綴會造成報錯。
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教學》】
以上是教你5個讓Vue3開發更順暢的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
