這篇文章跟大家聊聊Vue3 開發，整理分享5個可以提升開發效率的小知識，讓你在 Vue3 的專案開發中更加絲滑，希望對大家有所幫助！
最近鼓搗了一下Vue3 Vite2，遇到了不少問題，整理了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()
]
}) ##使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><script setup name="OrderList">
import { onMounted } from &#39;vue&#39;
onMounted(() => {
console.log(&#39;mounted===&#39;)
})
</script></pre><div class="contentsignin">登入後複製</div></div>二、API 自動導入#setup語法讓我們不用再一個的把變數和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對於一些常用的VueAPI，例如
、computed、watch#等，還是每次都需要我們在頁面上手動進行import。
我們可以透過unplugin-auto-import實現自動導入，無需import即可在檔案裡使用
Vue的API。 安裝
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">npm i unplugin-auto-import -D</pre><div class="contentsignin">登入後複製</div></div>
#設定已安裝設定完會自動產生// 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']
})
]
})登入後複製
檔案。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// auto-imports.d.ts
// Generated by &#39;unplugin-auto-import&#39;
// We suggest you to commit this file into source control
declare global {
const computed: typeof import(&#39;vue&#39;)[&#39;computed&#39;]
const createApp: typeof import(&#39;vue&#39;)[&#39;createApp&#39;]
const customRef: typeof import(&#39;vue&#39;)[&#39;customRef&#39;]
const defineAsyncComponent: typeof import(&#39;vue&#39;)[&#39;defineAsyncComponent&#39;]
const defineComponent: typeof import(&#39;vue&#39;)[&#39;defineComponent&#39;]
const effectScope: typeof import(&#39;vue&#39;)[&#39;effectScope&#39;]
const EffectScope: typeof import(&#39;vue&#39;)[&#39;EffectScope&#39;]
const getCurrentInstance: typeof import(&#39;vue&#39;)[&#39;getCurrentInstance&#39;]
const getCurrentScope: typeof import(&#39;vue&#39;)[&#39;getCurrentScope&#39;]
const h: typeof import(&#39;vue&#39;)[&#39;h&#39;]
const inject: typeof import(&#39;vue&#39;)[&#39;inject&#39;]
const isReadonly: typeof import(&#39;vue&#39;)[&#39;isReadonly&#39;]
const isRef: typeof import(&#39;vue&#39;)[&#39;isRef&#39;]
// ...
}
export {}</pre><div class="contentsignin">登入後複製</div></div>使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><script setup name="OrderList">
// 不用import，直接使用ref
const count = ref(0)
onMounted(() => {
console.log(&#39;mounted===&#39;)
})
</script></pre><div class="contentsignin">登入後複製</div></div>上面我們在vite.config.ts的設定裡只導入了 vue，
，除了vue的你也可以根據文件導入其他的如vue-router、 vue-use等。
個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發時都比較熟悉，閉著眼都能寫出來，對於一些不大熟悉的像VueUse這種函式庫，還是用<span style="font-size: 16px;">import</span>比較好一些，畢竟編輯器都有提示，不容易寫錯。 解決
eslint#錯誤問題
提示報錯，可以透過在eslintrc.js安裝外掛程式**vue-global-api**#解決。
// 安装依赖
npm i vue-global-api -D
// eslintrc.js
module.exports = {
extends: [
'vue-global-api'
]
}let count = ref(1)
const addCount = () => {
count.value += 1
}ref: count = 1
const addCount = () => {
count += 1
}// 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"
<img :src="require('@/assets/image/logo.png')" />
<template> <img :src="Logo" /> </template> <script setup> import Logo from '@/assets/image/logo.png' </script>
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>
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视频教程】
以上是Vue3中5個可以提升開發效率的小知識【整理分享】的詳細內容。更多資訊請關注PHP中文網其他相關文章！
