Vue 3.0 + Vite 快速尝鲜！

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>