記錄--5個知識點,讓 Vue3 開發更加絲滑

来源:https://www.cnblogs.com/smileZAZ/archive/2022/07/29/16532320.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 最近鼓搗了一下 Vue3 + Vite2,遇到了不少問題,整理了5個可以提高開發效率的小知識,讓你在 Vue3 的項目開發中更加絲滑、順暢。 一、setup name 增強 Vue3的setup語法糖是個好東西,但使用setup語法 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

前言

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

一、setup name 增強

Vue3setup語法糖是個好東西,但使用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,比如refcomputedwatch等,還是每次都需要我們在頁面上手動進行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的配置里只導入了vueimports: ['vue'],除了vue的你也可以根據文檔導入其他的如vue-routervue-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等文件預設是可以忽略尾碼導入的,不寫上的話其他類型文件的導入就變成需要加尾碼了。

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

本文轉載於:

https://juejin.cn/post/7054317318343491615

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 編程思想: 面向過程:問題比較簡單,可以用線性的思維解決 面向對象:問題較為複雜,使用簡單的線性思維無法解決 兩種編程思想都是解決問題的方式,並不對立,通過面向對象的方式便於我們從巨集觀上把握事物之間的複雜關係、便於我們分析整個系統。本質仍然使用面向過程的方式來處理。 面向對象的程式設計強調把數據和操 ...
  • 從單聲道、立體聲、環繞聲發展到三維聲,音頻回放技術的迭代演進是為了還原真實世界的聲音。其中,三維聲技術使用信號處理的方法對到達兩耳的聲音信號進行模擬,將聲場還原為三維空間,更接近真實世界。憑藉這個技術,各廠商在游戲、影視、音樂等場景中為用戶創造更真實自然且沉浸的聽覺體驗,也實現了更好的用戶訂閱增長。 ...
  • HMS Core 在AI領域最新的技術能力有哪些?本期Discovery直播以《與虎墩一起,玩轉AI新“聲”態》為主題,邀請了HMS Core 機器學習服務產品經理、機器翻譯高級專家以及HMS Core的新朋友“虎墩”,為大家展示機器學習的語音語言創新技術,分享機器學習與人工智慧的巨集觀發展趨勢。一起 ...
  • 數組 數組概述:數組固定一類數據的組合 (- 般情況下我們數組裡面的數據類型一致) 數組的聲明(引用數據類型) 與數組的長度 var關鍵字聲明 var arr = [];//聲明一個空數組 new關鍵字聲明 var arr = new Array(10);//new關鍵字聲明 arr為數組名 長度為 ...
  • 配置 Webpack Dev Server 可以解決本地開發前端應用時,手動執行 webpack 命令或 yarn build 命令,再去瀏覽器中訪問 dist/index.html 的麻煩耗時操作,可有效簡化流程。本文實戰演練配置 Webpack Dev Server 的方法與步驟。 ...
  • FrameDataTrans教程 博客園 乳鴿菌 20220729 核心原理是使用postMessage發送數據,window.addEventListener("message",fun)監聽。 插件地址 index.htm // <iframe id="fr" src="child.html"> ...
  • 記錄一個清除計時器的小bug,使用計時器的時候迴圈一直停不下來,把計時器賦值給了變數,仍舊無法停止。後來發現是清除器放置的位置有問題。 最初的位置: 這樣放置就導致if語句值運行了一次!我潛意識預設了整個getprogress方法為迴圈體,但其實只有那個計時器部分是迴圈體,導致我百思不得其解為什麼循 ...
  • 是不是見到google,facebook等大型專業網站的擁有不同的語言站群,可以不同語言間切換很給力 今天要介紹的就是如何識別不同國家語言,只需要簡單幾步,使你的web應用更有國際範。 安裝vue-i18n npm i vue-i18n --save 新建多語言json文件 在src目錄下新建 co ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...