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文件了，否则那代码真的是不敢看。
正在尝试写个博客具体体验一下。