vite入门教程

最新推荐文章于 2025-05-01 19:33:49 发布

2501_91537388

最新推荐文章于 2025-05-01 19:33:49 发布

阅读量881

点赞数 29

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/2501_91537388/article/details/147633817

版权

前端专栏收录该内容

40 篇文章

订阅专栏

Vite 是一款现代前端构建工具，它利用 ES 模块的原生支持来实现更快的开发服务器启动速度和更高效的热更新体验。本教程将帮助你快速上手 Vite，并开始使用它进行项目开发。

环境准备

Node.js: 首先确保你的机器上已经安装了 Node.js。
```
node -v
npm -v
```
创建项目目录:
创建一个新的文件夹并初始化一个 Node.js 项目。
```
mkdir my-vite-app
cd my-vite-app
npm init -y
```

安装 Vite

全局安装 Vite CLI（可选，推荐）:
使用 npm 全局安装 Vite CLI 工具。
```
npm install vite@latest -g
```
本地安装 Vite:
如果你不想全局安装，可以在项目中安装 Vite 作为开发依赖。
```
npm create vite@latest .
```
初始化项目:
根据提示选择你需要的框架或库（例如 Vue, React, Svelte 等），或者选择 vanilla 来创建一个纯 JavaScript 的项目。

项目结构

使用 Vite 创建新项目后，目录结构大致如下：

my-vite-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── ExampleComponent.vue
│   ├── App.{js,jsx,ts,tsx,vue}
│   └── main.{js,jsx,ts,tsx,vue}
├── index.html
├── package.json
└── vite.config.js

配置 Vite

Vite 使用 vite.config.js 文件来进行配置。如果你不需要额外的配置，可以不创建这个文件。

一个简单的配置示例：

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

export default defineConfig({
  plugins: [vue()],
  base: './', // 设置公共基础路径
});

开发和构建

启动开发服务器:
使用 Vite 启动一个热更新的开发服务器。
```
npm run dev
```
打包生产环境代码:
构建项目以生成可用于生产的静态文件。
```
npm run build
```

示例项目

假设我们选择了一个 Vue 项目，我们将使用以下基本结构。

index.html:
这是项目的入口 HTML 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js:
这是项目的主要入口文件。

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

const app = createApp(App);
app.mount('#app');

App.vue:
主要的 Vue 组件。

<template>
  <div id="app">
    <h1>Hello, Vite!</h1>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目

启动开发服务器:
```
npm run dev
```
浏览器将自动打开 http://localhost:3000，你可以在该地址查看运行中的应用。
打包生产环境代码:
```
npm run build
```
打包后生成的文件位于 dist 目录中，可以部署到任何静态文件服务器上。