Vue3中5個可以提升開發效率的小知識【整理分享】-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue3中5個可以提升開發效率的小知識【整理分享】

青灯夜游

Jan 21, 2022 am 10:36 AM

這篇文章跟大家聊聊Vue3 開發，整理分享5個可以提升開發效率的小知識，讓你在 Vue3 的專案開發中更加絲滑，希望對大家有所幫助！

Vue3中5個可以提升開發效率的小知識【整理分享】

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

一、setup name 增強

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

<script>
import { defineComponent, onMounted } from &#39;vue&#39;

export default defineComponent({
  name: &#39;OrderList&#39;
})
</script>

<script setup>
onMounted(() => {
  console.log(&#39;mounted===&#39;)
})
</script>

這時候借助插件vite-plugin-vue-setup-extend可以讓我們更優雅的解決這個問題，不用寫兩個script標籤，可以直接在script標籤上定義name。

安裝

npm i vite-plugin-vue-setup-extend -D

#設定

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import VueSetupExtend from &#39;vite-plugin-vue-setup-extend&#39;

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

##使用<pre class='brush:php;toolbar:false;'><script setup name="OrderList"> import { onMounted } from &#39;vue&#39; onMounted(() => { console.log(&#39;mounted===&#39;) }) </script></pre>二、API 自動導入#setup語法讓我們不用再一個的把變數和方法都return出去就能在模板上使用，大大的解放了我們的雙手。然而對於一些常用的VueAPI，例如

ref

、computed、watch#等，還是每次都需要我們在頁面上手動進行import。

我們可以透過unplugin-auto-import實現自動導入，無需import即可在檔案裡使用

Vue

的API。安裝

<pre class='brush:php;toolbar:false;'>npm i unplugin-auto-import -D</pre>

#設定

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import AutoImport from &#39;unplugin-auto-import/vite&#39;

export default defineConfig({
  plugins: [
    AutoImport({
      // dts: &#39;src/auto-imports.d.ts&#39;, // 可以自定义文件生成的位置，默认是根目录下
      imports: [&#39;vue&#39;]
    })
  ]
})

已安裝設定完會自動產生

auto-imports.d.ts

檔案。 <pre class='brush:php;toolbar:false;'>// auto-imports.d.ts // Generated by &#39;unplugin-auto-import&#39; // We suggest you to commit this file into source control declare global { const computed: typeof import(&#39;vue&#39;)[&#39;computed&#39;] const createApp: typeof import(&#39;vue&#39;)[&#39;createApp&#39;] const customRef: typeof import(&#39;vue&#39;)[&#39;customRef&#39;] const defineAsyncComponent: typeof import(&#39;vue&#39;)[&#39;defineAsyncComponent&#39;] const defineComponent: typeof import(&#39;vue&#39;)[&#39;defineComponent&#39;] const effectScope: typeof import(&#39;vue&#39;)[&#39;effectScope&#39;] const EffectScope: typeof import(&#39;vue&#39;)[&#39;EffectScope&#39;] const getCurrentInstance: typeof import(&#39;vue&#39;)[&#39;getCurrentInstance&#39;] const getCurrentScope: typeof import(&#39;vue&#39;)[&#39;getCurrentScope&#39;] const h: typeof import(&#39;vue&#39;)[&#39;h&#39;] const inject: typeof import(&#39;vue&#39;)[&#39;inject&#39;] const isReadonly: typeof import(&#39;vue&#39;)[&#39;isReadonly&#39;] const isRef: typeof import(&#39;vue&#39;)[&#39;isRef&#39;] // ... } export {}</pre>使用<pre class='brush:php;toolbar:false;'><script setup name="OrderList"> // 不用import，直接使用ref const count = ref(0) onMounted(() => { console.log(&#39;mounted===&#39;) }) </script></pre>上面我們在vite.config.ts的設定裡只導入了 vue，

imports: ['vue']

，除了vue的你也可以根據文件導入其他的如vue-router、 vue-use等。

個人建議只對一些比較熟悉的API做自動導入，如vue的API我們在開發時都比較熟悉，閉著眼都能寫出來，對於一些不大熟悉的像VueUse這種函式庫，還是用<span style="font-size: 16px;">import</span>比較好一些，畢竟編輯器都有提示，不容易寫錯。 解決

eslint#錯誤問題

##。 #import的情況下使用會導致

eslint

提示報錯，可以透過在eslintrc.js安裝外掛程式**vue-global-api**#解決。

// 安装依赖
npm i vue-global-api -D

// eslintrc.js
module.exports = {
  extends: [
    &#39;vue-global-api&#39;
  ]
}

三、告別.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 &#39;vite&#39;
import vue from &#39;@vitejs/plugin-vue&#39;

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="/static/imghwm/default1.png"  data-src="require(&#39;@/assets/image/logo.png&#39;)"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >

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

<template>
  <img  src="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >
</template>

<script setup>
import Logo from &#39;@/assets/image/logo.png&#39;
</script>

###每次使用圖片都得###import###，顯然耽誤了大家摸魚的時間，這時我們可以藉助###vite-plugin-vue-images###來實現自動導入圖片。 ############安裝#########

npm i vite-plugin-vue-images -D

##########設定#########

// vite.config.ts
import { defineConfig } from &#39;vite&#39;
import ViteImages from &#39;vite-plugin-vue-images&#39;

export default defineConfig({
  plugins: [
    ViteImages({
      dirs: [&#39;src/assets/image&#39;] // 指明图片存放目录
    })
  ]
})

################################# ##使用#########

<template>
  <!-- 直接使用 -->
  <img  src="/static/imghwm/default1.png"  data-src="Logo"  class="lazy"  : / alt="Vue3中5個可以提升開發效率的小知識【整理分享】" >
</template>

<script setup>
// import Logo from &#39;@/assets/image/logo.png&#39;
</script>

######五、忽略.vue後綴#########相信很多人在###Vue2###開發時，導入文件都是忽略.vue後綴的。但在###Vite###裡，忽略.vue後綴會造成報錯。 ###

import Home from &#39;@/views/home&#39; // error
import Home from &#39;@/views/home.vue&#39; // ok

###根據尤大大的回答，必須寫後綴其實是故意這麼設計的，也就是提倡大家這麼去寫。 ######但如果你真的不想寫，官方也是提供了支持的。 ###

// vite.config.ts
import { defineConfig } from &#39;vite&#39;

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

这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。

感谢

本次分享到这里就结束了，感谢您的阅读！予人玫瑰，手有余香，别忘了动动手指点个赞。

本文如果有什么错误或不足，也欢迎评论区指正！

【相关推荐：vue.js视频教程】

以上是Vue3中5個可以提升開發效率的小知識【整理分享】的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

vue.js：定義其在網絡開發中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web開發中的角色是作為一個漸進式JavaScript框架，簡化開發過程並提高效率。 1)它通過響應式數據綁定和組件化開發，使開發者能專注於業務邏輯。 2)Vue.js的工作原理依賴於響應式系統和虛擬DOM，優化性能。 3)實際項目中，使用Vuex管理全局狀態和優化數據響應性是常見實踐。

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年發布的漸進式JavaScript框架，用於構建用戶界面。它的核心優勢包括：1.響應式數據綁定，數據變化自動更新視圖；2.組件化開發，UI可拆分為獨立、可複用的組件。

Netflix的前端：React（或VUE）的示例和應用Apr 16, 2025 am 12:08 AM

Netflix使用React作為其前端框架。 1)React的組件化開發模式和強大生態系統是Netflix選擇它的主要原因。 2)通過組件化，Netflix將復雜界面拆分成可管理的小塊，如視頻播放器、推薦列表和用戶評論。 3)React的虛擬DOM和組件生命週期優化了渲染效率和用戶交互管理。

前端景觀：Netflix如何處理其選擇Apr 15, 2025 am 12:13 AM

Netflix在前端技術上的選擇主要集中在性能優化、可擴展性和用戶體驗三個方面。 1.性能優化：Netflix選擇React作為主要框架，並開發了SpeedCurve和Boomerang等工具來監控和優化用戶體驗。 2.可擴展性：他們採用微前端架構，將應用拆分為獨立模塊，提高開發效率和系統擴展性。 3.用戶體驗：Netflix使用Material-UI組件庫，通過A/B測試和用戶反饋不斷優化界面，確保一致性和美觀性。

React與Vue：Netflix使用哪個框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）

框架的選擇：是什麼推動了Netflix的決定？Apr 13, 2025 am 12:05 AM

Netflix在框架選擇上主要考慮性能、可擴展性、開發效率、生態系統、技術債務和維護成本。 1.性能與可擴展性：選擇Java和SpringBoot以高效處理海量數據和高並發請求。 2.開發效率與生態系統：使用React提升前端開發效率，利用其豐富的生態系統。 3.技術債務與維護成本：選擇Node.js構建微服務，降低維護成本和技術債務。

反應，vue和Netflix前端的未來Apr 12, 2025 am 12:12 AM

Netflix主要使用React作為前端框架，輔以Vue用於特定功能。 1)React的組件化和虛擬DOM提升了Netflix應用的性能和開發效率。 2)Vue在Netflix的內部工具和小型項目中應用，其靈活性和易用性是關鍵。

前端中的vue.js：現實世界的應用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一種漸進式JavaScript框架，適用於構建複雜的用戶界面。 1)其核心概念包括響應式數據、組件化和虛擬DOM。 2)實際應用中，可以通過構建Todo應用和集成VueRouter來展示其功能。 3)調試時，建議使用VueDevtools和console.log。 4)性能優化可通過v-if/v-show、列表渲染優化和異步加載組件等實現。

See all articles