vue3.x幾個不看不知道的自動化載入技巧

anchovy發表於2022-05-25
Vue

前言

最近鼓搗了一下 Vue3 + Vite2，遇到了不少問題，整理了5個可以提高開發效率的小知識，讓你在 Vue3 的專案開發中更加絲滑、順暢。

一、setup name 增強

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

<script lang="ts">
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'OrderList'
})
</script>

<script lang="ts" 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 lang="ts" setup name="OrderList">
import { onMounted } from 'vue'

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

二、API 自動匯入

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: t  ypeof import('vue')['isRef']
  // ...
}
export {}

使用

<script lang="ts" 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 更好一些，畢竟編輯器都有提示，不易寫錯。

解決eslint報錯問題

在沒有 import 的情況下使用會導致 eslint 提示報錯，通過如下步驟解決：

// vite.config.ts
AutoImport({
    dts: 'types/auto-imports.d.ts',
    imports: ['vue'],
    // 解決eslint報錯問題
    eslintrc: {
      enabled: true
    }
})

這時會自動生成 .eslintrc-auto-import.json 檔案，將其匯入 eslintrc.js 即可。

// eslintrc.js
module.exports = {
  extends: [
    './.eslintrc-auto-import.json'
  ]
}

三、告別.value

眾所周知，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 lang="ts" 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 lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>

五、忽略.vue字尾

相信很多人在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等檔案預設是可以忽略字尾匯入的，不寫上的話其他型別檔案的匯入就變成需要加字尾了。

PS:雖然可以這麼做，不過畢竟官方文件說了不建議忽略 .vue 字尾，所以建議大家在實際開發中還是老老實實寫上 .vue。

更多前端知識，請關注小程式，不定期有驚喜！

image.png

相關文章