vite简单的使用教程

Vite 是一个轻量、快速的前端构建工具，支持 Vue 3.x、React、Preact 等多种框架，它的最大特点是快速启动、快速热更新。

安装

使用 npm 安装：

npm install -g vite

使用 yarn 安装：

yarn global add vite

创建项目

Vite 支持从命令行创建项目，使用以下命令：

vite create <project-name>

例如，创建一个 Vue 3.x 项目：

vite create vue3-project --template vue

这将创建一个包含了 Vue 3.x 的模板项目。

运行项目
在项目根目录下执行以下命令，启动 Vite 服务：

vite

配置

Vite 的默认配置已经足够满足大多数情况下的需求，但如果需要修改配置，可以在项目根目录下创建一个 vite.config.js 文件。

例如，修改端口号：

// vite.config.js
export default {
  server: {
    port: 3000
  }
}

插件

Vite 支持插件机制，可以通过插件扩展 Vite 的功能。以下是一些常用插件：

@vitejs/plugin-vue：支持 Vue 单文件组件；
@vitejs/plugin-react：支持 React；
@vitejs/plugin-babel：支持 Babel 编译；
@vitejs/plugin-eslint：支持 ESLint。
安装插件的方式与普通 npm 包一样，然后在 vite.config.js 中引入即可：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue()
  ]
}

总结

Vite 是一个快速、灵活、易用的前端构建工具，可以让开发者更加专注于业务逻辑的实现。通过以上介绍，相信你已经对 Vite 有了初步了解，建议尝试使用并深入学习，以便更好地应用于项目开发中。