記錄--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
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...