小伙伴們知道 TienChin 項(xiàng)目前端用的是 Vue3，當(dāng)我們把 Vue3 官網(wǎng)刷了一遍之后回來(lái)看 TienChin 項(xiàng)目的前端，發(fā)現(xiàn)還是有很多不太一樣的地方，今天松哥就來(lái)和大家捋一捋 Vue3 中幾個(gè)好玩的插件和配置，學(xué)完之后，相信大家對(duì) TienChin 項(xiàng)目前端的很多寫(xiě)法就明白了。

1. Vite

首先來(lái)給大家介紹一下 Vite，雖然這在 Vue3 中并不是必須的，但是考慮到 TienChin 項(xiàng)目前端用了這個(gè)，還是給大家稍微說(shuō)兩句。

Vite（法語(yǔ)意為 "快速的"，發(fā)音 /vit/，發(fā)音同 "veet"）是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。它主要由兩部分組成：

• 一個(gè)開(kāi)發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。
• 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源。

Vite 意在提供開(kāi)箱即用的配置，同時(shí)它的插件 API 和 JavaScript API 帶來(lái)了高度的可擴(kuò)展性，并有完整的類(lèi)型支持。

如果小伙伴們絕得陌生，那么不妨回憶下我們之前在 vhr 中給大家介紹的 Webpack，其實(shí)這個(gè) Vite 相當(dāng)于就是 Webpack。相比于 Webpack 的傳統(tǒng)工具，Vite 最大的特點(diǎn)就是快。

Vite 通過(guò)在一開(kāi)始將應(yīng)用中的模塊區(qū)分為依賴(lài)和源碼兩類(lèi)，改進(jìn)了開(kāi)發(fā)服務(wù)器啟動(dòng)時(shí)間，因?yàn)橐蕾?lài)變化小而源碼才是經(jīng)常會(huì)變的東西。

不知道小伙伴們看到這里有沒(méi)有想到我們 Java 中也有一個(gè)類(lèi)似的玩意，那就是 Spring Boot 熱加載。

Spring Boot 的熱加載中用到了兩個(gè)類(lèi)加載器：一個(gè)是 base classloader，專(zhuān)門(mén)用來(lái)加載一些第三方的類(lèi)；還有一個(gè)是 restart classloader，專(zhuān)門(mén)用來(lái)加載我們自己寫(xiě)的類(lèi)。熱加載的時(shí)候，只需要 restart classloader 工作即可。

好了，對(duì)于我們 Java 工程師來(lái)說(shuō)，大家知道 Vite 是一個(gè)項(xiàng)目構(gòu)建工具就可以了，接下來(lái)的例子我要通過(guò) Vite 來(lái)和大家演示。

2. 自動(dòng)導(dǎo)入常見(jiàn)方法

在 TienChin 項(xiàng)目中，小伙伴們看到，很多原本需要導(dǎo)入之后才能用的方法，竟然都不需要導(dǎo)入就可以使用。

我創(chuàng)建一個(gè)項(xiàng)目來(lái)給大家演示看下。

我們用 Vite 來(lái)構(gòu)建一個(gè)項(xiàng)目。

如果你的 npm 版本是 6.x，那么執(zhí)行如下命令創(chuàng)建一個(gè) Vue3 工程：

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

如果你的 npm 版本是 7+，那么執(zhí)行如下命令創(chuàng)建一個(gè) Vue3 工程：

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

這個(gè) Vue 工程創(chuàng)建成功之后，沒(méi)有 router 啥的，需要我們自己安裝上，這個(gè)常規(guī)操作我就不多說(shuō)了。

2.1 傳統(tǒng)寫(xiě)法

現(xiàn)在我舉一個(gè)簡(jiǎn)單的例子，比如說(shuō)在 MyVue01 這個(gè)頁(yè)面上有一個(gè)按鈕，點(diǎn)擊之后，可以跳轉(zhuǎn)到 MyVue02 這個(gè)頁(yè)面，那么我們的點(diǎn)擊事件可以按照如下的方式來(lái)寫(xiě)：

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

首先我們需要從 vue-router 中導(dǎo)入 useRouter 函數(shù)，然后調(diào)用該函數(shù)可以獲取到 router 對(duì)象，再調(diào)用 router 中的 push 方法就可以完成頁(yè)面跳轉(zhuǎn)了。

以前在 Vue2 中，我們一般都是通過(guò) this.$router 來(lái)獲取到 router 對(duì)象，然后通過(guò) router 對(duì)象來(lái)實(shí)現(xiàn)頁(yè)面導(dǎo)航操作。但是在 Vue3 中，沒(méi)有 this 了，不過(guò) Vue3 中提供了一個(gè) getCurrentInstance 方法來(lái)獲取當(dāng)前 Vue 實(shí)例，所以頁(yè)面跳轉(zhuǎn)，我們也可以按照下面這種方式來(lái)寫(xiě)：

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

    const {proxy} = getCurrentInstance();

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

這里的 proxy 就類(lèi)似于以前 Vue2 中的 this。

松哥這里是以 router 為例來(lái)和大家演示，如果是 Vuex/Pinia，也有類(lèi)似的寫(xiě)法，我就不挨個(gè)演示了。

無(wú)論是上面那種寫(xiě)法，都需要首先導(dǎo)入一個(gè)函數(shù)，然后才能開(kāi)始使用。然而我們?cè)?TienChin 項(xiàng)目的前端代碼中，雖然也有導(dǎo)入，但是像上面這兩個(gè)例子中導(dǎo)入都是沒(méi)有的，那是怎么回事？

這就借助于一個(gè)自動(dòng)導(dǎo)入的工具了。

2.2 自動(dòng)導(dǎo)入

前端有一個(gè)工具插件叫做 unplugin-auto-import，通過(guò)這個(gè)插件可以實(shí)現(xiàn)一些方法的自動(dòng)導(dǎo)入。該方法的使用步驟如下：

(1) 安裝插件：

npm i unplugin-auto-import -D

由于這個(gè)插件只是一個(gè)開(kāi)發(fā)輔助工具而已，所以安裝的時(shí)候加上 -D 參數(shù)，這樣就會(huì)安裝到 devDependencies 中了。

(2) 配置插件：

插件的配置是在項(xiàng)目根目錄下的 vite.config.js 文件中進(jìn)行配置的，內(nèi)容如下：

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({
        // 可以自定義文件生成的位置，默認(rèn)是根目錄下，使用ts的建議放src目錄下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })]
})

小伙伴們注意注釋掉的代碼，這個(gè)插件配置好之后，啟動(dòng)項(xiàng)目，默認(rèn)會(huì)在 node_modules/unplugin-auto-import/auto-imports.d.ts 位置生成一個(gè)文件，但是配置 dts 屬性可以修改這個(gè)文件生成的位置。

imports 則是指需要自動(dòng)導(dǎo)入的方法都是哪里的方法，以我們前文中的兩個(gè)案例為例，useRouter 是 vue-router 中的方法，getCurrentInstance 方法則是 vue 中的，所以這里導(dǎo)入我選擇了 vue 和 vue-router，當(dāng)然，小伙伴們?cè)陂_(kāi)發(fā)中，如果有需要，也可以導(dǎo)入 Vuex/Pinia 等。

配置好了插件之后，我們當(dāng)我們?cè)俅涡枰褂蒙厦婺切┓椒ǖ臅r(shí)候，就不需要導(dǎo)入了，直接用即可：

<script setup>

    const {proxy} = getCurrentInstance();

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

useRouter 也不需要導(dǎo)入了。

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

以后，凡是 vue 和 vue-router 中的方法都是不需要導(dǎo)入就可以使用了，其他組件中的方法則還是跟以前一樣，必須導(dǎo)入之后才可以使用。

3. 組件去后綴

以前在 Vue2 中，我們導(dǎo)入組件的時(shí)候，可能都習(xí)慣省略 .vue 后綴，畢竟用 WebStorm 開(kāi)發(fā)的時(shí)候，系統(tǒng)自動(dòng)導(dǎo)入的時(shí)候也會(huì)幫我們省略掉這個(gè)后綴，寫(xiě)法類(lèi)似下面這樣：

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

但是現(xiàn)在在 Vite 中，如果還是這樣寫(xiě)就會(huì)報(bào)錯(cuò)，類(lèi)似下面這樣：

現(xiàn)在必須要寫(xiě)后綴了，但是有的人就是不習(xí)慣寫(xiě)后綴，那怎么辦？我們可以在 vite.config.js 中添加如下配置，這樣就可以不用寫(xiě) .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({
        // 可以自定義文件生成的位置，默認(rèn)是根目錄下，使用ts的建議放src目錄下
        // dts: 'src/auto-imports.d.ts',
        imports: ['vue','vue-router']
    })],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
})

好了，現(xiàn)在大家明白了為什么 TienChin 項(xiàng)目前端都不寫(xiě) .vue 了吧。

4. name 屬性問(wèn)題

以前在 Vue2 中，我們可以通過(guò)如下方式給一個(gè) Vue 組件設(shè)置名稱(chēng)：

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

在 Vue3 中，我們?nèi)绻麑?setup 寫(xiě)到 script 節(jié)點(diǎn)中的話，就沒(méi)法定義 name 了，如果還需要使用 name 屬性的話，那么可以再定義一個(gè) script 節(jié)點(diǎn)，專(zhuān)門(mén)用來(lái)配置 name 屬性，如下：

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

    const router = useRouter();

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

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

提示，我們?cè)谡{(diào)試頁(yè)面中，就可以看到自定義的組件名了：

不過(guò)這種寫(xiě)法多多少還是有點(diǎn)費(fèi)事。

通過(guò) vite-plugin-vue-setup-extend 插件可以簡(jiǎn)化在 Vue3 中設(shè)置 name 屬性，安裝該插件之后，我們就可以直接在 script 節(jié)點(diǎn)中定義 name 屬性的值了，安裝方式如下：

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

裝好之后，在 vite.config.js 中再進(jìn)行配置一下，如下：

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({
            // 可以自定義文件生成的位置，默認(rèn)是根目錄下，使用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 插件的配置。

配置完成后，我們就可以通過(guò)如下方式來(lái)定義 name 屬性了：

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

    const router = useRouter();

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

到此這篇關(guān)于Vue3 中的插件和配置推薦大全的文章就介紹到這了,更多相關(guān)Vue3插件和配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論