vite2已經出來一段時間了，這幾天沒忍住嘗試了一下，首先體驗到的就是 —— 快，真的很快，再也不用痛苦的等待了。
然后就是踩坑，因為vite2還算是比較新，所以介紹文章不多，雖然已經出來官網文檔了，但是現在的官網似乎側重原理介紹，對於最初級的使用方式，似乎沒有，或者是我還沒有找到。
這里匯總一些基礎用法。
創建項目
vite2 構建項目：
建議使用yarn，可以更快一些。
yarn create @vitejs/app
然后按照提示操作即可！
選擇需要的模板：
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
- svelte
- svelte-ts
速度會非常快，只是之后需要進入文件夾，執行npm install安裝需要的包，然后是npm run dev啟動項目。
然后可以看到一個默認的項目，提供一些最基本的功能。
安裝第三方控件
路由、狀態管理和UI庫，基本沒啥變化，還是以前的安裝方式，也是在main.js里面注冊。
新變化
script setup
直接開寫代碼就可以了，更簡單。
- props 屬性
import { defineProps } from 'vue'
const props = defineProps({
msg: String
})
console.log(props)
模板里面的使用方式不變，代碼里面要這么寫，定義調用一氣呵成。
- emit
import { defineEmit } from 'vue'
const emit = defineEmit(['myclick'])
const toParent = ()=> {
emit('myclick','hello parent')
}
這次emit也有了自己的方式，可以不用和上下文混在一起了。
- 上下文
import { useContext } from 'vue'
const ctx = useContext()
console.log('home:', ctx)
//導出
ctx.expose({
someMethod(){
console.log("將方法導出外部，供外部使用")
}
})
-
ctx
attrs、emit、slots還是在這里，用法應該沒啥變化。 -
expose
在子組件里面寫一個方法，然后在父組件里面可以調用，這個算是彌補了一個不足吧，當然以前也是有這種方式的。 -
導出的方法，父組件的調用方式
<HelloWorld ref="hw"/>
import { ref, onMounted } from 'vue'
const hw = ref(null)
onMounted(() => {
hw.value.someMethod()
})
// 或者寫在事件里面。
這個調用方式還是有點麻煩，找了半天。
便捷性
如果你覺得在 setup 里面return 對象很煩，那么恭喜你，現在不需要return了。
如果你覺得 引入一個組件之后，還需要在 components 中聲明，那么恭喜你，現在也不需要了，import 引入進來之后，模板里面就可以用了。
vite.config.js 內基礎配置
增加了一個配置文件，這里面可以進行各種配置，看着有點暈。
export default {
alias: {
"@": resolve("src"),
"comps": resolve("src/components"),
"apis": resolve("src/apis"),
"views": resolve("src/views"),
"utils": resolve("src/utils"),
"routes": resolve("src/routes"),
"styles": resolve("src/styles"),
},
plugins: [vue()]
}
plugins: [vue()] 這個是默認的，上面的別名可以自己設置，還可以有其他設置，總之很多的樣子。
適應。。。
變化還是有點大，需要習慣一下，尤其是傳說中的“心智問題”。如果說 vue3 的composition API 帶來的心智難度是1 （約束性變小） 的話，那么這個vite2帶來的難度大概是 2 （約束性幾乎沒了），想要駕馭好更難了一些。
vue3 還可以不太在意分出來js文件，但是現在是必須分出來單獨的js文件了，否則那代碼真的是不敢看。
正在嘗試寫個博客具體體驗一下。