首頁 > 文章 > web前端 > Vue3中5個可以提升開發效率的小知識【整理分享】

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

青灯夜游轉載: 2022-01-21 10:36:582346瀏覽

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

最近鼓搗了一下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:js;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:js;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:js;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:js;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="require(&#39;@/assets/image/logo.png&#39;)" />

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

<template>
  <img :src="Logo" />
</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="Logo" />
</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中文網其他相關文章！

陳述：

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

上一篇：9 款漂亮、功能強大的GitHub開源後台模板下一篇：9 款漂亮、功能強大的GitHub開源後台模板

看更多