Vite作为一个新的开发与构建工具，有着比使用webpack，rollup等打包工具快得多的热更新(HMR)与服务器冷启动，得益于使用esbuild的方式预构建与直接在浏览器中使用ESModule的方式引入文件。
所以vite能帮助我们很大程度的提升开发效率与体验，下面以从零配置一个Vue3.x项目为例，一起来学习一下这个构建工具吧～

基本概念

在开始之前，我们需要先了解一下vite中的一些基本概念。

依赖预构建

vite在启动服务的时候会先搜索项目中需要用到的原生模块，由于原生模块无法被浏览器的ESM所识别，所以vite利用esbuild将原生模块打包成ESM。

天然支持TypeScript

vite天然支持TypeScript，使得在配置构建文件的时候我们不需要对ts文件进行额外的支持。

插件

与其他构建工具一样，插件用于对构建工具的扩展，我们可以利用插件来对文件进行特定的处理。

从零搭建vue项目

了解了基本的概念，下面就开始来搭建项目。

1.新建项目，安装必要的模块

• 在项目内安装vite和支持vue的插件@vitejs/plugin-vue

  yarn add vite @vitejs/plugin-vue -D

• 安装vue3

  yarn add vue@next

安装完后对文件进行创建

• 创建一个index.html作为入口的html文件

注意：<script type="module" src="/src/main.ts"></script> 中的type="module"

global.d.ts 用于声明全局模块的类型，因为这里只创建基本的vue项目，这里只需要对vue文件进行兼容

    // global.d.ts
    declare module '*.vue' {}

2.创建vite配置文件，用于控制构建工具进行特定的操作。

import { defineConfig } from 'vite';
import vuejs from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vuejs()],
});

在构建工具中使用@vitejs/plugin-vue插件，以支持vue文件。

3.编写vue页面

我们在src中新建两个文件main.ts和main.vue

• main.ts就是常规的vue入口页面

// main.ts
import { createApp } from 'vue';
import App from './main.vue';

const app = createApp(App);

app.mount('#app');

• main.vue为入口的页面

// main.vue
<script lang="ts" setup>

</script>

<template>
  <div>
    Hello World
  </div>
</template>

<style>

</style>

来测试一下

在package.json的script中添加

"scripts": {
    "dev": "vite --port 8080"
}

运行一下 yarn dev

到这里，我们已经完成了一个简单的vite配置，接下来继续深入一下配置。

配置全局变量

参考

1. vite