Vite介绍

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。

官网网址：Vite (opens new window)

简单上手

新建一个index.html，复制GitHub的代码

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

新建一个vue组件,取名为Comp

<template>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button {
  color: red;
}
</style>

安装vite

npx vite

安装好之后打开3000端口网址

进行修改：

<template>
  <div>
    <h3>使用vite制作一个简单的计数器</h3>
    <p>{{ count }}</p>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
  </div>
</template>

<script>
export default {
  data: () => ({ count: 0 }),
};
</script>

<style scoped>
button {
  color: red;
}
</style>

保存后无需热更新