IT评测·应用市场-qidao123.com

标题: Vite入门指南 [打印本页]
作者: 三尺非寒    时间: 2025-2-19 04:56
标题: Vite入门指南
一、什么是Vite？

Vite（法语意为"快速"）是由Vue作者尤雨溪开辟的新型前端构建工具。它基于原生ES模块（ESM）实现，具有以下焦点优势：

二、环境预备

确保已安装：

  1. # 验证安装
  2. node -v
  3. npm -v
复制代码
三、创建第一个项目

1. 初始化项目

  1. npm create vite@latest my-vite-app
复制代码
选择框架模板（这里以React+TS为例）：
  1. ✔ Select a framework: › React
  2. ✔ Select a variant: › TypeScript
复制代码
2. 项目结构

  1. my-vite-app/
  2. ├── node_modules/
  3. ├── public/
  4. │   └── vite.svg
  5. ├── src/
  6. │   ├── assets/
  7. │   ├── App.css
  8. │   ├── App.tsx
  9. │   ├── index.css
  10. │   ├── main.tsx
  11. │   └── vite-env.d.ts
  12. ├── index.html
  13. ├── package.json
  14. ├── tsconfig.json
  15. └── vite.config.ts
复制代码
3. 启动开辟服务器

  1. cd my-vite-app
  2. npm install
  3. npm run dev
复制代码
访问 http://localhost:5173
四、焦点功能实践

1. 模块热更换（HMR）

修改 src/App.tsx：
  1. function App() {
  2.   return (
  3.     <div className="App">
  4.       <h1>Hello Vite!</h1>
  5.       <p>Edit and save to see HMR in action</p>
  6.     </div>
  7.   )
  8. }
复制代码
保存后浏览器立即更新，无需刷新页面
2. CSS处理惩罚

创建 src/Button.module.css：
  1. .primary {
  2.   background: #646cff;
  3.   color: white;
  4.   padding: 12px 24px;
  5.   border-radius: 4px;
  6. }
复制代码
在组件中使用：
  1. import styles from './Button.module.css'
  3. function Button() {
  4.   return <button className={styles.primary}>Click Me</button>
  5. }
复制代码
3. 静态资源处理惩罚

  1. // 直接引入图片
  2. import logo from './assets/react.svg'
  4. function Logo() {
  5.   return <img src={logo} alt="React logo" />
  6. }
复制代码
五、Vite配置详解

修改 vite.config.ts：
  1. import { defineConfig } from 'vite'
  2. import react from '@vitejs/plugin-react'
  4. export default defineConfig({
  5.   plugins: [react()],
  6.   server: {
  7.     port: 3000,
  8.     open: true
  9.   },
  10.   build: {
  11.     outDir: 'dist',
  12.     assetsDir: 'static'
  13.   }
  14. })
复制代码
六、插件系统

1. 常用插件示例

安装官方React插件：
  1. npm install @vitejs/plugin-react -D
复制代码
配置插件：
  1. import { defineConfig } from 'vite'
  2. import react from '@vitejs/plugin-react'
  4. export default defineConfig({
  5.   plugins: [
  6.     react({
  7.       babel: {
  8.         plugins: ['babel-plugin-styled-components']
  9.       }
  10.     })
  11.   ]
  12. })
复制代码
2. 社区插件示例（以SVG转换为例）

  1. npm install vite-plugin-svgr -D
复制代码
配置：
  1. import svgr from 'vite-plugin-svgr'
  3. export default defineConfig({
  4.   plugins: [
  5.     svgr({
  6.       svgrOptions: {
  7.         icon: true
  8.       }
  9.     })
  10.   ]
  11. })
复制代码
使用SVG组件：
  1. import { ReactComponent as Logo } from './logo.svg'
  3. function App() {
  4.   return <Logo />
  5. }
复制代码
七、生产构建

  1. npm run build
复制代码
生成优化后的静态文件：
  1. dist/
  2. ├── static/
  3. │   ├── js/
  4. │   ├── css/
  5. │   └── assets/
  6. └── index.html
复制代码
八、环境变量

1. 创建环境文件

  1. .env                # 所有情况
  2. .env.local          # 本地覆盖，git忽略
  3. .env.development    # 开发环境
  4. .env.production     # 生产环境
复制代码
2. 界说变量（前缀必须为VITE_）

  1. VITE_API_URL=https://api.example.com
复制代码
3. 使用变量

  1. console.log(import.meta.env.VITE_API_URL)
复制代码
九、与Webpack的主要差异

特性ViteWebpack启动时间毫秒级随着项目增长变慢构建方式ESM原生模块Bundle打包HMR速度保持状态快速更新必要重建模块配置复杂度简单相对复杂生态快速成长成熟 十、完整示例代码

查看GitHub仓库：
  1. git clone https://github.com/vitejs/vite-template-react.git
复制代码
十一、最佳实践


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4