1、Vite 简单介绍
Vite 是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具，它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。
作者曾在微博上发言：Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。
从发言中可以看出 Vite 主要特点是基于浏览器 native 的 ES module 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可。这种方式比 webpack rollup 生产环境好很多（尤雨溪：I feell may never be able to go back to webpack）。
2、Vite 的项目搭建
根据官方推荐的方法，你会发现项目创建的过程相当的快，一下是 Vite 文档的一些步骤，详情异步 Vite 官网。
$ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev
yarn 用户也可使用 yarn 初始化 Vite 项目。需要注意的是，官方发布：Vite 目前只适用于 Vue 3.x，这也意味着开发的过程中不能使用与 Vue 3 不兼容的库。
3、结合 Vue 3.0 使用
Vue 发布 3.0 的 Composition API，为组件代码的组织提供了更大的灵活性，感兴趣的同学可以移步 Vue 组合式 API。
<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ // state 现在是一个响应式的状态 count: 0, double: computed(() => state.count * 2), }) function increment() { state.count++ } return { //这里需要将状态和方法 return state, increment, } }, } </script>
