Vue3 中的外掛和設定推薦大全

小夥伴們知道 TienChin 專案前端用的是 Vue3，當我們把 Vue3 官網刷了一遍之後回來看 TienChin 專案的前端，發現還是有很多不太一樣的地方，今天鬆哥就來和大家捋一捋 Vue3 中幾個好玩的外掛和設定，學完之後，相信大家對 TienChin 專案前端的很多寫法就明白了。

1. Vite

首先來給大家介紹一下 Vite，雖然這在 Vue3 中並不是必須的，但是考慮到 TienChin 專案前端用了這個，還是給大家稍微說兩句。

Vite（法語意為 "快速的"，發音 /vit/，發音同 "veet"）是一種新型前端構建工具，能夠顯著提升前端開發體驗。它主要由兩部分組成：

• 一個開發伺服器，它基於 原生 ES 模組 提供了 豐富的內建功能，如速度快到驚人的 模組熱更新（HMR）。
• 一套構建指令，它使用 Rollup 打包你的程式碼，並且它是預設定的，可輸出用於生產環境的高度優化過的靜態資源。

Vite 意在提供開箱即用的設定，同時它的外掛 API 和 JavaScript API 帶來了高度的可延伸性，並有完整的型別支援。

如果小夥伴們絕得陌生，那麼不妨回憶下我們之前在 vhr 中給大家介紹的 Webpack，其實這個 Vite 相當於就是 Webpack。相比於 Webpack 的傳統工具，Vite 最大的特點就是快。

Vite 通過在一開始將應用中的模組區分為依賴和原始碼兩類，改進了開發伺服器啟動時間，因為依賴變化小而原始碼才是經常會變的東西。

不知道小夥伴們看到這裡有沒有想到我們 Java 中也有一個類似的玩意，那就是 Spring Boot 熱載入。

Spring Boot 的熱載入中用到了兩個類載入器：一個是 base classloader，專門用來載入一些第三方的類；還有一個是 restart classloader，專門用來載入我們自己寫的類。熱載入的時候，只需要 restart classloader 工作即可。

好了，對於我們 Java 工程師來說，大家知道 Vite 是一個專案構建工具就可以了，接下來的例子我要通過 Vite 來和大家演示。

2. 自動匯入常見方法

在 TienChin 專案中，小夥伴們看到，很多原本需要匯入之後才能用的方法，竟然都不需要匯入就可以使用。

我建立一個專案來給大家演示看下。

我們用 Vite 來構建一個專案。

如果你的 npm 版本是 6.x，那麼執行如下命令建立一個 Vue3 工程：

npm create vite@latest my-vue-app --template vue

如果你的 npm 版本是 7+，那麼執行如下命令建立一個 Vue3 工程：

npm create vite@latest my-vue-app -- --template vue

這個 Vue 工程建立成功之後，沒有 router 啥的，需要我們自己安裝上，這個常規操作我就不多說了。

2.1 傳統寫法

現在我舉一個簡單的例子，比如說在 MyVue01 這個頁面上有一個按鈕，點選之後，可以跳轉到 MyVue02 這個頁面，那麼我們的點選事件可以按照如下的方式來寫：

<script setup>
    import {useRouter} from 'vue-router';
    const router = useRouter();
    function go() {
        router.push("/my02");
    }
</script>

首先我們需要從 vue-router 中匯入 useRouter 函數，然後呼叫該函數可以獲取到 router 物件，再呼叫 router 中的 push 方法就可以完成頁面跳轉了。

以前在 Vue2 中，我們一般都是通過 this.$router 來獲取到 router 物件，然後通過 router 物件來實現頁面導航操作。但是在 Vue3 中，沒有 this 了，不過 Vue3 中提供了一個 getCurrentInstance 方法來獲取當前 Vue 範例，所以頁面跳轉，我們也可以按照下面這種方式來寫：

<script setup>
    import {getCurrentInstance} from 'vue';

    const {proxy} = getCurrentInstance();

    function go() {
        proxy.$router.push("/my02");
    }
</script>

這裡的 proxy 就類似於以前 Vue2 中的 this。

鬆哥這裡是以 router 為例來和大家演示，如果是 Vuex/Pinia，也有類似的寫法，我就不挨個演示了。

無論是上面那種寫法，都需要首先匯入一個函數，然後才能開始使用。然而我們在 TienChin 專案的前端程式碼中，雖然也有匯入，但是像上面這兩個例子中匯入都是沒有的，那是怎麼回事？

這就藉助於一個自動匯入的工具了。

2.2 自動匯入

前端有一個工具外掛叫做 unplugin-auto-import，通過這個外掛可以實現一些方法的自動匯入。該方法的使用步驟如下：

(1) 安裝外掛：

npm i unplugin-auto-import -D

由於這個外掛只是一個開發輔助工具而已，所以安裝的時候加上 -D 引數，這樣就會安裝到 devDependencies 中了。

(2) 設定外掛：

外掛的設定是在專案根目錄下的 vite.config.js 檔案中進行設定的，內容如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        // 可以自定義檔案生成的位置，預設是根目錄下，使用ts的建議放src目錄下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })]
})

小夥伴們注意註釋掉的程式碼，這個外掛設定好之後，啟動專案，預設會在 node_modules/unplugin-auto-import/auto-imports.d.ts 位置生成一個檔案，但是設定 dts 屬性可以修改這個檔案生成的位置。

imports 則是指需要自動匯入的方法都是哪裡的方法，以我們前文中的兩個案例為例，useRouter 是 vue-router 中的方法，getCurrentInstance 方法則是 vue 中的，所以這裡匯入我選擇了 vue 和 vue-router，當然，小夥伴們在開發中，如果有需要，也可以匯入 Vuex/Pinia 等。

設定好了外掛之後，我們當我們再次需要使用上面那些方法的時候，就不需要匯入了，直接用即可：

<script setup>

    const {proxy} = getCurrentInstance();

    function go() {
        proxy.$router.push("/my02");
    }
</script>

useRouter 也不需要匯入了。

<script setup>
    const router = useRouter();
    function go() {
        router.push("/my02");
    }
</script>

以後，凡是 vue 和 vue-router 中的方法都是不需要匯入就可以使用了，其他元件中的方法則還是跟以前一樣，必須匯入之後才可以使用。

3. 元件去字尾

以前在 Vue2 中，我們匯入元件的時候，可能都習慣省略 .vue 字尾，畢竟用 WebStorm 開發的時候，系統自動匯入的時候也會幫我們省略掉這個字尾，寫法類似下面這樣：

import MyVue01 from "../views/MyVue01";
import MyVue02 from "../views/MyVue02";

但是現在在 Vite 中，如果還是這樣寫就會報錯，類似下面這樣：

現在必須要寫字尾了，但是有的人就是不習慣寫字尾，那怎麼辦？我們可以在 vite.config.js 中新增如下設定，這樣就可以不用寫 .vue​、.js 等字尾了。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        // 可以自定義檔案生成的位置，預設是根目錄下，使用ts的建議放src目錄下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

好了，現在大家明白了為什麼 TienChin 專案前端都不寫 .vue 了吧。

4. name 屬性問題

以前在 Vue2 中，我們可以通過如下方式給一個 Vue 元件設定名稱：

<script>
    export default {
        name: "MyVue03",
        mounted() {
            console.log("MyVue03")
        }
    }
</script>

在 Vue3 中，我們如果將 setup 寫到 script 節點中的話，就沒法定義 name 了，如果還需要使用 name 屬性的話，那麼可以再定義一個 script 節點，專門用來設定 name 屬性，如下：

<script setup>
    import {useRouter} from 'vue-router';

    const router = useRouter();

    function go() {
        router.push("/my02");
    }
</script>

<script>
    export default {
        name: "JavaboyVue"
    }
</script>

提示，我們在偵錯頁面中，就可以看到自定義的元件名了：

不過這種寫法多多少還是有點費事。

通過 vite-plugin-vue-setup-extend 外掛可以簡化在 Vue3 中設定 name 屬性，安裝該外掛之後，我們就可以直接在 script 節點中定義 name 屬性的值了，安裝方式如下：

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

裝好之後，在 vite.config.js 中再進行設定一下，如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 可以自定義檔案生成的位置，預設是根目錄下，使用ts的建議放src目錄下
            // dts: 'src/auto-imports.d.ts',
            imports: ['vue', 'vue-router']
        }),
        VueSetupExtend()
    ],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

VueSetupExtend 就是 vite-plugin-vue-setup-extend 外掛的設定。

設定完成後，我們就可以通過如下方式來定義 name 屬性了：

<script setup name="JavaboyVue">
    import {useRouter} from 'vue-router';

    const router = useRouter();

    function go() {
        router.push("/my02");
    }
</script>

到此這篇關於Vue3 中的外掛和設定推薦大全的文章就介紹到這了,更多相關Vue3外掛和設定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！