vite
vite最近有点火 尤大大都力荐的东东 肯定要去尝试下
https://github.com/vitejs/vite
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with [Rollup](https://rollupjs.org/) for production.
vite 是一个针对Vue单页面组件的无打包开发服务器，可以直接在浏览器运行请求的vue文件。
就是esModule模块直通到浏览器端 xxx
二话不多说 先看看到底是什么 跑个🌰 看看
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
看看就下面一个hello word
image.png
network面板打开 居然都会这种代码 就是vue文件编译后的直接输出
image.png
打开hello world让编辑下 好 就编辑下看看 保存 居然不用编译过程 保存就直接更新了 果真是666
<template>
<section>
<h1>{{ count }}</h1>
<button @click="count++">count++ {{ count }}</button>
<button @click="count--">count-- {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</section>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0
}
}
}
</script>
image.png
vite资源
尤大大制作vite 简单上手
尝鲜Vue3——vite源码分析
发现几个问题
- vue3中 能支持多个根节点的 vetur现有的支持还有问题
- vue3中 $0.vue居然不见了 就只有一个_vnode 这是什么鬼
image.png
