第2章 Vite快速上手

2024-07-08 07:01:30

第2章 Vite快速上手

1 安装 Vite

1.1 安装 Node.js 和 npm

在开始使用 Vite 之前，你需要确保已经安装了 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官方网站下载并安装最新版本的 Node.js。安装 Node.js 时，npm 会自动安装。

安装完成后，可以通过命令行检查安装是否成功：

node -v
npm -v

这会显示你安装的 Node.js 和 npm 的版本。

1.2 创建 Vite 项目

使用 npm 或 Yarn 创建一个新的 Vite 项目。以下是使用 npm 的方法：

npm create vite@latest

运行这个命令后，系统会提示你输入项目名称和选择模板。你可以根据需要选择 Vue、React、Svelte 等模板。

使用 Yarn

如果你更喜欢使用 Yarn，可以使用以下命令：

yarn create vite

1.3 安装依赖

创建项目后，进入项目目录并安装依赖：

cd my-vite-project
npm install

或者使用 Yarn：

cd my-vite-project
yarn

2 创建第一个 Vite 项目

2.1 项目结构解析

创建 Vite 项目后，默认的项目结构如下：

my-vite-project
├── index.html
├── package.json
├── src
│   ├── main.js
│   └── App.vue (如果选择了 Vue 模板)
└── vite.config.js (可选)

`index.html`

这是应用的入口 HTML 文件。Vite 不需要复杂的 HTML 模板，只需要一个简单的 index.html 文件即可。

`package.json`

这是 Node.js 项目的配置文件，包含项目的元数据和依赖信息。

`src/`

这是你的源码目录，所有的应用代码都在这里。main.js 是应用的入口文件。

`vite.config.js`

这是 Vite 的配置文件。对于简单项目，这个文件是可选的。

2.2 启动开发服务器

在项目目录中运行以下命令启动 Vite 开发服务器：

npm run dev

或者使用 Yarn：

yarn dev

开发服务器启动后，终端会显示访问地址，通常是 http://localhost:3000。你可以在浏览器中打开这个地址查看应用。

2.3 项目文件解析

`main.js`

这是应用的入口文件，用于挂载根组件并启动应用。以下是一个 Vue 项目中 main.js 的示例：

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

createApp(App).mount('#app')

`App.vue`

这是应用的根组件。在 Vue 项目中，App.vue 通常是应用的主组件。以下是一个简单的示例：

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

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

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

3 项目结构解析

3.1 `index.html`

Vite 的 index.html 文件是项目的入口 HTML 文件，它不同于传统构建工具的模板文件。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>

特点

模块化支持：Vite 通过 <script type="module"> 标签引入模块，这样浏览器可以直接加载和执行模块。
简单直观：不像传统工具的复杂模板引擎，Vite 的 index.html 文件是一个简单的 HTML 文件，易于理解和维护。

3.2 `package.json`

这是 Node.js 项目的配置文件，定义了项目的元数据和依赖。以下是一个示例：

{
  "name": "my-vite-project",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3. 0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

关键字段

scripts：定义了项目的常用命令，如 dev（启动开发服务器）、build（构建生产版本）和 serve（预览构建结果）。
dependencies：定义了项目的运行时依赖，如 Vue。
devDependencies：定义了项目的开发时依赖，如 Vite。

3.3 `src/` 目录

这是你的源码目录，所有的应用代码都在这里。以下是一个典型的目录结构：

src
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
└── App.vue

`main.js`

这是应用的入口文件，用于挂载根组件并启动应用。以下是一个示例：

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

createApp(App).mount('#app')

`App.vue`

这是应用的根组件。在 Vue 项目中，App.vue 通常是应用的主组件。以下是一个简单的示例：

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
  </div>
</template>

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

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

组件目录

你可以在 components 目录中创建和组织你的 Vue 组件。以下是一个简单的示例：

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  font-size: 2em;
  text-align: center;
}
</style>

在 App.vue 中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vite App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

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

4 启动开发服务器

在项目目录中运行以下命令启动 Vite 开发服务器：

npm run dev

或者使用 Yarn：

yarn dev

4.1 配置开发服务器

你可以通过 vite.config.js 文件配置开发服务器。例如，可以配置代理以解决跨域问题：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http

://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

4.2 使用 HMR（模块热替换）

Vite 开发服务器默认支持 HMR，当你修改代码时，浏览器会自动更新，而不需要手动刷新页面。

HMR 的优势

即时反馈：修改代码后立即看到效果，提升开发效率。
状态保持：页面不刷新，保持当前应用状态，避免重复操作。

5 构建生产版本

5.1 构建命令

在项目目录中运行以下命令构建生产版本：

npm run build

或者使用 Yarn：

yarn build

5.2 构建输出

构建完成后，生成的文件将输出到 dist 目录。你可以将这个目录部署到静态服务器上。

`dist` 目录结构

dist
├── index.html
├── assets
│   ├── index.abc123.js
│   └── index.abc123.css
└── ...

5.3 配置构建选项

你可以通过 vite.config.js 文件配置构建选项，例如，指定输出目录、设置公共路径等：

// vite.config.js
export default {
  build: {
    outDir: 'build',  // 自定义输出目录
    assetsDir: 'static',  // 自定义静态资源目录
    rollupOptions: {
      output: {
        // 自定义 Rollup 输出选项
      }
    }
  }
}

5.4 预览构建结果

你可以使用 Vite 提供的命令预览构建结果：

npm run serve

或者使用 Yarn：

yarn serve

预览服务器会在本地启动，你可以在浏览器中查看构建后的应用。

6 自定义配置

6.1 Vite 配置文件

vite.config.js 是 Vite 的配置文件，你可以在这里自定义 Vite 的行为。例如，可以配置别名、插件等：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

配置别名

通过配置别名，可以简化模块导入路径：

// vite.config.js
export default {
  resolve: {
    alias: {
      '@components': '/src/components'
    }
  }
}

添加插件

Vite 具有强大的插件系统，可以通过插件扩展其功能。以下是一个添加 Vue 插件的示例：

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

export default {
  plugins: [vue()]
}

6.2 环境变量

Vite 支持使用 .env 文件管理环境变量。你可以在项目根目录创建 .env 文件：

# .env
VITE_API_URL=https://api.example.com

在代码中，可以通过 import.meta.env 访问环境变量：

console.log(import.meta.env.VITE_API_URL)

6.3 多环境配置

你可以为不同的环境创建不同的 .env 文件，例如 .env.development 和 .env.production：

# .env.development
VITE_API_URL=https://dev.api.example.com

# .env.production
VITE_API_URL=https://api.example.com

Vite 会根据当前环境加载相应的 .env 文件。

码农公寓