Vite使用方法

160 阅读1分钟

Vite是一款基于ESM的前端构建工具,它具有快速的启动时间和开发体验,支持Vue、React、Svelte等多种框架,并且能够进行快速的热更新。

安装

你可以使用npm或者yarn来安装Vite:

npm install vite -g
# 或者
yarn global add vite

使用

创建新项目

使用Vite创建一个新项目非常简单:

vite create my-project

开发模式

进入项目目录并启动开发服务器:

cd my-project
npm run dev

然后你就可以在浏览器中访问http://localhost:3000来进行开发调试了。

生产模式

在生产模式下构建项目非常简单:

npm run build

这将会在dist目录下生成构建后的文件,你可以将其部署到你的服务器上。

插件

Vite支持多种插件来扩展其功能,你可以通过Vite官方文档来了解更多的插件信息。

示例代码

在使用Vite进行开发时,可以按照项目需求添加自己的业务代码。例如,在Vue项目中,你可以创建一个App.vue文件并在其中编写Vue组件的代码。

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vite'
    }
  }
}
</script>