本文記錄如何在 Vue2 環境下儘量使用 Vue3 的 Composition-api 並配合 Vuetify2 使用 ...
本文記錄如何在 Vue2 環境下儘量使用 Vue3 的 Composition-api 並配合 Vuetify2 使用
前言
之前在改造一個用 Vuetify2 的 項目，由於 Vuetify3 還處於 beta 階段並且與 Vuetify2 相比缺失一些特性，但又想用 Vue3 的 <script setup> 語法，於是尋找了下相關方案，下麵簡單記錄一下。
開始之前
建議使用 VSCode 開發並安裝以下插件且禁用 Vetur：
初始化
使用 npm init 初始化項目
添加所需依賴
- [email protected]: 指定 2 版本，不指定的話預設安裝 3 版本
- vue-template-compiler: 將 Vue 2.0 模板預編譯為渲染函數
- vite-plugin-vue2: 讓 Vite 支持 Vue2
- @vue/composition-api: 在 Vue2 項目中使用組合 API
- unplugin-vue2-script-setup: 在 Vue2 項目中使用
<script setup>語法糖 - unplugin-vue-components: 按需自動引入組件
- @vue/runtime-dom: 配合 Volar
完整依賴如下：
"dependencies": {
"@mdi/font": "5.9.55",
"@vue/composition-api": "^1.6.0",
"roboto-fontface": "*",
"vue": "^2.6.14",
"vuetify": "^2.6.4",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@types/node": "^17.0.29",
"@types/webfontloader": "^1.6.34",
"@vue/runtime-dom": "^3.2.33",
"sass": "1.32.12",
"typescript": "^4.6.3",
"unplugin-vue-components": "^0.19.3",
"unplugin-vue2-script-setup": "^0.10.2",
"vite": "^2.9.5",
"vite-plugin-vue2": "^2.0.0",
"vue-template-compiler": "^2.6.14",
"vue-tsc": "^0.34.10"
}
文件目錄結構
