本章将探讨如何将 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>
这样，你就可以在传统的 PHP 项目中使用 Vite 进行开发和构建了。
标签：集成,npm,app,js,Vite,使用,my,vite From： https://blog.csdn.net/imdeity/article/details/140213254