小編給大家分享一下Vue3中如何提高開(kāi)發(fā)效率，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的恩施土家網(wǎng)站建設(shè)公司，恩施土家接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行恩施土家網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

一、setup name 增強(qiáng)

Vue3的setup語(yǔ)法糖是個(gè)好東西，但使用setup語(yǔ)法帶來(lái)的第一個(gè)問(wèn)題就是無(wú)法自定義name，而我們使用keep-alive往往是需要name的，解決這個(gè)問(wèn)題通常是通過(guò)寫(xiě)兩個(gè)script標(biāo)簽來(lái)解決，一個(gè)使用setup，一個(gè)不使用，但這樣必然是不夠優(yōu)雅的。

onMounted(() => {
  console.log('mounted===')
})

這時(shí)候借助插件vite-plugin-vue-setup-extend可以讓我們更優(yōu)雅的解決這個(gè)問(wèn)題，不用寫(xiě)兩個(gè)script標(biāo)簽，可以直接在script標(biāo)簽上定義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()
  ]
})

使用

import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted===')
})

二、API 自動(dòng)導(dǎo)入

setup語(yǔ)法讓我們不用再一個(gè)一個(gè)的把變量和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對(duì)于一些常用的VueAPI，比如ref、computed、watch等，還是每次都需要我們?cè)陧?yè)面上手動(dòng)進(jìn)行import。

我們可以通過(guò)unplugin-auto-import實(shí)現(xiàn)自動(dòng)導(dǎo)入，無(wú)需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({
      // dts: 'src/auto-imports.d.ts', // 可以自定義文件生成的位置，默認(rèn)是根目錄下
      imports: ['vue']
    })
  ]
})

安裝配置完會(huì)自動(dòng)生成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 {}

使用

// 不用import，直接使用ref
const count = ref(0)

onMounted(() => {
  console.log('mounted===')
})

上面我們?cè)?code>vite.config.ts的配置里只導(dǎo)入了vue，imports: ['vue']，除了vue的你也可以根據(jù)文檔導(dǎo)入其他的如vue-router、vue-use等。

個(gè)人建議只對(duì)一些比較熟悉的API做自動(dòng)導(dǎo)入，如vue的API我們?cè)陂_(kāi)發(fā)時(shí)都比較熟悉，閉著眼都能寫(xiě)出來(lái)，對(duì)于一些不大熟悉的像VueUse這種庫(kù)，還是使用import更好一些，畢竟編輯器都有提示，不易寫(xiě)錯(cuò)。

解決eslint報(bào)錯(cuò)問(wèn)題

在沒(méi)有import的情況下使用會(huì)導(dǎo)致eslint提示報(bào)錯(cuò)，可以通過(guò)在eslintrc.js安裝插件**vue-global-api**解決。

// 安裝依賴(lài)
npm i vue-global-api -D

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

三、告別.value

眾所周知，ref要求我們?cè)L問(wèn)變量時(shí)需要加上.value，這讓很多開(kāi)發(fā)者覺(jué)得難受.

let count = ref(1)

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

后來(lái)尤大大也提交了一份新的ref語(yǔ)法糖提案。

ref: count = 1

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

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

這里我介紹的是另外一種寫(xiě)法，也是官方后來(lái)出的一種方案，在ref前加上$，該功能默認(rèn)關(guān)閉，需要手動(dòng)開(kāi)啟。

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

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 開(kāi)啟ref轉(zhuǎn)換
    })
  ]
})

開(kāi)啟之后可以這樣寫(xiě)：

let count = $ref(1)

const addCount = () => {
  count++
}

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

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

四、自動(dòng)導(dǎo)入圖片

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

但在Vite中不支持require了，引用圖片變成了下面這樣：

import Logo from '@/assets/image/logo.png'

每次使用圖片都得import，顯然耽誤了大家摸魚(yú)的時(shí)間，這時(shí)我們可以借助vite-plugin-vue-images來(lái)實(shí)現(xiàn)自動(dòng)導(dǎo)入圖片。

安裝

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'] // 指明圖片存放目錄
    })
  ]
})

使用

// import Logo from '@/assets/image/logo.png'

五、忽略.vue后綴

相信很多人在Vue2開(kāi)發(fā)時(shí)，導(dǎo)入文件都是忽略.vue后綴的。但在Vite里，忽略.vue后綴會(huì)引起報(bào)錯(cuò)。

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

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

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

// vite.config.ts
import { defineConfig } from 'vite'

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

這里要注意，手動(dòng)配置extensions要記得把其他類(lèi)型的文件后綴也加上，因?yàn)槠渌?lèi)型如js等文件默認(rèn)是可以忽略后綴導(dǎo)入的，不寫(xiě)上的話其他類(lèi)型文件的導(dǎo)入就變成需要加后綴了。

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

以上是“Vue3中如何提高開(kāi)發(fā)效率”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！