第6章 Vite的集成和使用-CSDN博客

本文链接：https://blog.csdn.net/imdeity/article/details/140213254

本章将探讨如何将 Vite 集成到不同类型的项目中，以及如何确保其与各种技术和工具的兼容性。通过具体的实例和代码示例，你将学习到 Vite 的强大和灵活性。

6.1 与常用框架的集成

6.1.1 与 React 的集成

Vite 可以非常容易地与 React 项目集成。以下是一个简单的步骤来创建一个 React 项目并使用 Vite 构建：

初始化项目

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

项目结构

项目结构如下：

my-react-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
└── vite.config.js

配置文件 (vite.config.js)

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

export default defineConfig({
  plugins: [react()]
})

6.1.2 与 Vue 的集成

同样，Vite 也能非常方便地集成到 Vue 项目中。

初始化项目

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

项目结构

项目结构如下：

my-vue-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.vue
│   ├── main.js
│   └── index.css
├── .gitignore
├── index.html
├── package.json
└── vite.config.js

配置文件 (vite.config.js)

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

export default defineConfig({
  plugins: [vue()]
})

6.1.3 与 Svelte 的集成

Vite 同样支持 Svelte 项目，以下是集成步骤：

初始化项目

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install

项目结构

项目结构如下：

my-svelte-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.svelte
│   ├── main.js
│   └── index.css
├── .gitignore
├── index.html
├── package.json
└── vite.config.js

配置文件 (vite.config.js)

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

6.2 TypeScript 支持

Vite 原生支持 TypeScript。要使用 TypeScript，只需在项目中添加相应的配置文件。

TypeScript 项目初始化

npm create vite@latest my-ts-app -- --template vanilla-ts
cd my-ts-app
npm install

项目结构

my-ts-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── main.ts
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.js

配置文件 (vite.config.js)

对于 TypeScript 项目，不需要特别配置，默认模板已经包含了必要的配置。

import { defineConfig } from 'vite'

export default defineConfig({
  // TypeScript support is built-in
})

6.3 CSS 预处理器

Vite 支持各种 CSS 预处理器，如 Sass、Less 和 Stylus。

使用 Sass

安装依赖

npm install -D sass

使用示例

在 src 目录中创建一个 .scss 文件：

/* src/styles.scss */
$primary-color: #42b983;

body {
  color: $primary-color;
}

在主入口文件中引入该样式：

import './styles.scss'

使用 Less

安装依赖

npm install -D less

使用示例

创建一个 .less 文件：

/* src/styles.less */
@primary-color: #42b983;

body {
  color: @primary-color;
}

在主入口文件中引入该样式：

import './styles.less'

使用 Stylus

安装依赖

npm install -D stylus

使用示例

创建一个 .styl 文件：

/* src/styles.styl */
primary-color = #42b983

body
  color primary-color

在主入口文件中引入该样式：

import './styles.styl'

6.4 PostCSS 与 CSS Modules

Vite 内置支持 PostCSS 和 CSS Modules。

使用 PostCSS

安装依赖

npm install -D postcss postcss-preset-env

配置文件

在项目根目录创建 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0,
    },
  },
}

使用 CSS Modules

在 Vite 项目中，CSS Modules 默认支持，只需在 CSS 文件名中加入 .module 即可。

示例

创建一个 styles.module.css 文件：

/* src/styles.module.css */
.title {
  color: blue;
}

在组件中使用：

import styles from './styles.module.css'

function App() {
  return (
    <div>
      <h1 className={styles.title}>Hello, Vite with CSS Modules!</h1>
    </div>
  )
}

export default App

6.5 与传统项目的集成

Vite 也可以集成到传统的项目中，逐步替代旧的构建工具。

示例：集成到传统的 PHP 项目

假设你有一个传统的 PHP 项目，目录结构如下：

my-php-app/
├── public/
│   ├── index.php
│   └── assets/
├── src/
│   └── main.js
└── vite.config.js

配置 Vite

import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../public/assets',
  }
})

启动 Vite

npm run dev

在 PHP 文件中引入资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My PHP App</title>
    <script type="module" src="/assets/main.js"></script>
</head>
<body>
    <h1>Hello, Vite with PHP!</h1>
</body>
</html>