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插件和配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3 組件與API直接使用的方法詳解(無需import)
- Vue3自動引入組件與組件庫的方法實例
- vue3中getCurrentInstance示例講解
- 使用vite創建vue3項目的詳細圖文教程
- Vite創建Vue3項目及Vue3使用jsx詳解