本篇文章給大家?guī)砹岁P于vue中開發(fā)相關知識，整理了5個可以提高開發(fā)效率的小知識，讓你在 Vue3 的項目開發(fā)中更加絲滑、順暢，希望對大家有幫助。

一、setup name 增強

Vue3的setup語法糖是個好東西，但使用setup語法帶來的第一個問題就是無法自定義name，而我們使用keep-alive往往是需要name的，解決這個問題通常是通過寫兩個script標簽來解決，一個使用setup，一個不使用，但這樣必然是不夠優(yōu)雅的。

<script> import { defineComponent, onMounted } from 'vue' export default defineComponent({   name: 'OrderList' }) </script> <script setup> onMounted(() => {   console.log('mounted===') }) </script>

這時候借助插件vite-plugin-vue-setup-extend可以讓我們更優(yōu)雅的解決這個問題，不用寫兩個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>

二、API 自動導入

setup語法讓我們不用再一個一個的把變量和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對于一些常用的VueAPI，比如ref、computed、watch等，還是每次都需要我們在頁面上手動進行import。

我們可以通過unplugin-auto-import實現(xiàn)自動導入，無需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的你也可以根據(jù)文檔導入其他的如vue-router、vue-use等。

個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發(fā)時都比較熟悉，閉著眼都能寫出來，對于一些不大熟悉的像VueUse這種庫，還是使用import更好一些，畢竟編輯器都有提示，不易寫錯。

解決eslint報錯問題

在沒有import的情況下使用會導致eslint提示報錯，可以通過在eslintrc.js安裝插件**vue-global-api**解決。

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

三、告別.value

眾所周知，ref要求我們訪問變量時需要加上.value，這讓很多開發(fā)者覺得難受.

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

后來尤大大也提交了一份新的ref語法糖提案。

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

該提案一出便引起了社區(qū)的一片討論，時間已經(jīng)過去很久了，這里就不再廢話這個話題了。

這里我介紹的是另外一種寫法，也是官方后來出的一種方案，在ref前加上$，該功能默認關閉，需要手動開啟。

// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({   plugins: [     vue({       refTransform: true // 開啟ref轉(zhuǎn)換     })   ] })

開啟之后可以這樣寫：

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

該語法糖根據(jù)不同的版本配置也略有不同，下面貼一下我自己所用相關插件的版本：

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

四、自動導入圖片

在Vue2時我們經(jīng)常會這樣引用圖片：

<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來實現(xiàn)自動導入圖片。

爽歸爽，但容易發(fā)生變量沖突，慎用！

安裝

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>

五、忽略.vue后綴

相信很多人在Vue2開發(fā)時，導入文件都是忽略.vue后綴的。但在Vite里，忽略.vue后綴會引起報錯。

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

根據(jù)尤大大的回答，必須寫后綴其實是故意這么設計的，也就是提倡大家這么去寫。

但如果你真的不想寫，官方也是提供了支持的。

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

這里要注意，手動配置extensions要記得把其他類型的文件后綴也加上，因為其他類型如js等文件默認是可以忽略后綴導入的，不寫上的話其他類型文件的導入就變成需要加后綴了。

雖然可以這么做，不過畢竟官方文檔說了不建議忽略.vue后綴，所以建議大家在實際開發(fā)中還是老老實實寫上.vue。

【