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 有了初步了解,建议尝试使用并深入学习,以便更好地应用于项目开发中。