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>