vite入门教程 - 技术栈

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

环境准备

Node.js: 首先确保你的机器上已经安装了 Node.js。
sh 复制代码
```
node -v
npm -v
```
创建项目目录 :

创建一个新的文件夹并初始化一个 Node.js 项目。
sh 复制代码
```
mkdir my-vite-app
cd my-vite-app
npm init -y
```

安装 Vite

全局安装 Vite CLI （可选，推荐）:

使用 npm 全局安装 Vite CLI 工具。
sh 复制代码
```
npm install vite@latest -g
```
本地安装 Vite :

如果你不想全局安装，可以在项目中安装 Vite 作为开发依赖。
sh 复制代码
```
npm create vite@latest .
```
初始化项目 :

根据提示选择你需要的框架或库（例如 Vue, React, Svelte 等），或者选择 vanilla 来创建一个纯 JavaScript 的项目。

项目结构

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

sh 复制代码

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 文件来进行配置。如果你不需要额外的配置，可以不创建这个文件。

一个简单的配置示例：

js 复制代码

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

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

开发和构建

启动开发服务器 :

使用 Vite 启动一个热更新的开发服务器。
sh 复制代码
```
npm run dev
```
打包生产环境代码 :

构建项目以生成可用于生产的静态文件。
sh 复制代码
```
npm run build
```

示例项目

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

index.html :

这是项目的入口 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 :

这是项目的主要入口文件。

js 复制代码

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

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

App.vue :

主要的 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>

运行项目

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

总结

通过以上步骤，你可以快速搭建一个使用 Vite 的前端项目，并开始开发。Vite 提供了高效的热更新和更快的启动速度，非常适合现代前端开发。

希望这个入门教程对你有所帮助！如果你有任何问题或需要更多细节，请随时提问。