Vite 完整功能详解与 Vue 项目实战指南

Vite 是下一代前端开发工具,由 Vue 作者尤雨溪开发,提供极速的开发体验和高效的生产构建。以下是完整功能解析和实战示例:


一、Vite 核心功能亮点

  1. 闪电般冷启动

    • 基于原生 ES 模块(ESM)按需编译
    • 启动时间与项目大小无关
  2. 即时热更新(HMR)

    • 毫秒级更新,保留应用状态
    • 支持 Vue/JSX/CSS 的 HMR
  3. 开箱即用支持

    • TypeScript
    • JSX/TSX
    • CSS 预处理器(Sass/Less/Stylus)
    • PostCSS
    • Web Assembly
  4. 优化构建

    • 生产环境使用 Rollup 打包
    • 自动代码分割
    • 异步 chunk 优化
  5. 插件系统

    • 兼容 Rollup 插件生态
    • 官方插件:@vitejs/plugin-vue、@vitejs/plugin-react 等

二、完整 Vue 项目实战示例

项目结构
my-vue-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── store/       # Pinia 状态管理
│   ├── router/      # Vue Router
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── .env             # 环境变量
├── vite.config.js   # Vite 配置
└── package.json
1. 创建项目
npm create vite@latest
# 选择 Vue + TypeScript
cd my-vue-app
npm install
2. 配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},server: {port: 8080,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}},css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}},build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor'}}}}}
})
3. 集成 Vue Router
npm install vue-router@4
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'const routes = [{ path: '/', component: Home },{ path: '/user/:id', component: () => import('@/views/User.vue'),meta: { requiresAuth: true }}
]const router = createRouter({history: createWebHistory(),routes
})export default router
4. 集成 Pinia 状态管理
npm install pinia
// src/store/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({name: 'Guest',isAdmin: false}),actions: {login(userData) {this.name = userData.namethis.isAdmin = userData.isAdmin}},getters: {welcomeMessage: (state) => `Hello, ${state.name}!`}
})
5. 组件示例 (带 TypeScript)
<!-- src/components/UserCard.vue -->
<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/user'const userStore = useUserStore()
const welcomeMsg = computed(() => userStore.welcomeMessage)defineProps<{userId: numbershowDetails: boolean
}>()
</script><template><div class="user-card"><h3>{{ welcomeMsg }}</h3><slot name="header" /><div v-if="showDetails"><!-- 用户详情 --></div></div>
</template><style scoped>
.user-card {border: 1px solid #eee;padding: 1rem;border-radius: 8px;
}
</style>
6. 环境变量配置
# .env.development
VITE_API_BASE=http://localhost:3000/api
VITE_DEBUG_MODE=true# .env.production
VITE_API_BASE=https://api.example.com
// 使用环境变量
const apiBase = import.meta.env.VITE_API_BASE
7. 性能优化技巧
  1. 动态导入组件
const UserProfile = defineAsyncComponent(() =>import('@/components/UserProfile.vue')
)
  1. 图片资源处理
<!-- 自动转换小图片为 base64 -->
<img src="@/assets/logo.png" alt="Vite logo"><!-- 使用 ?url 获取资源 URL -->
import largeImage from '@/assets/bg.jpg?url'
  1. 全局样式管理
// src/styles/main.scss
@mixin flex-center {display: flex;justify-content: center;align-items: center;
}// vite.config.js 中全局引入
8. 高级功能实现

SSR 支持 (vite-plugin-ssr)

npm install vite-plugin-ssr
// vite.config.js
import ssr from 'vite-plugin-ssr/plugin'export default defineConfig({plugins: [vue(), ssr()]
})

PWA 支持

npm install vite-plugin-pwa
import { VitePWA } from 'vite-plugin-pwa'export default defineConfig({plugins: [VitePWA({registerType: 'autoUpdate',manifest: {name: 'My Vue App',short_name: 'VueApp',theme_color: '#ffffff'}})]
})
9. 调试与测试
// package.json
"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","test": "vitest","coverage": "vitest run --coverage"
}
10. 部署配置
// 静态部署 (GitHub Pages)
build: {outDir: 'docs',assetsDir: 'static'
}// SPA 路由处理
export default defineConfig({build: {rollupOptions: {input: {main: path.resolve(__dirname, 'index.html'),404: path.resolve(__dirname, '404.html')}}}
})

三、Vite vs Webpack 优势对比

特性ViteWebpack
启动速度毫秒级随项目增长线性下降
HMR 更新局部更新 <50ms全量更新 >1s
构建原理ESM 按需编译 + RollupBundle 打包
配置复杂度极简配置复杂配置
TS 支持原生支持需要 loader
开发体验接近原生开发有打包等待

四、最佳实践建议

  1. 路由懒加载:使用动态导入提升首屏速度
  2. CSS 模块化:避免全局样式污染
  3. Tree-shaking:确保组件库支持 ESM
  4. 按需导入:对大型库使用 unplugin-auto-import
  5. CDN 优化:通过 build.rollupOptions.external 分离依赖
// 自动导入示例 (vite.config.js)
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [AutoImport({imports: ['vue','vue-router','pinia'],dts: 'src/auto-imports.d.ts'})]
})

通过以上配置和示例,你可以快速构建一个现代化的 Vue 3 应用,享受 Vite 带来的极致开发体验!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/913775.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/913775.shtml
英文地址,请注明出处:http://en.pswp.cn/news/913775.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 3 中使用路由参数跳转时 watch 触发重复请求问题详解

&#x1f4d8;Vue 3 中使用路由参数跳转时 watch 触发重复请求问题详解&#x1f516; 收藏 点赞 关注&#xff0c;掌握 Vue 3 路由参数监听中的隐藏陷阱&#xff0c;避免详情页、嵌套路由页误触发重复请求&#xff01;&#x1f9e9; 一、问题背景 在 Vue 3 项目中&#xff0c…

前端 项目更新通知 (plugin-web-update-notification)

项目版本更新迭代时&#xff0c;需提示用户更新系统&#xff0c;不然早时间不更新对用户体验很不好&#xff0c;所以在每次部署后需要提示用户&#xff0c;刷新静态资源。推荐插件 plugin-web-update-notification .具体配置 vite.config.js文件中 import { webUpdateNotice …

【力扣(LeetCode)】数据挖掘面试题0002:当面对实时数据流时您如何设计和实现机器学习模型?

文章大纲一、实时数据处理&#xff1a;构建低延迟的数据管道1. 数据接入与缓冲2. 实时清洗与校验3. 特征标准化与对齐二、模型设计&#xff1a;选择适配实时场景的模型架构1. 模型选择原则三、训练与更新策略&#xff1a;离线与在线协同&#xff0c;应对概念漂移1. 离线-在线协…

TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)

问题描述&#xff1a; 客户前端部署在nginx上&#xff0c;后端部署在tongweb8上&#xff08;相当于前后端分离&#xff09;&#xff0c;登录的时候报错&#xff0c;f12看network&#xff0c;状态码405&#xff0c;如下所示&#xff1a;看console&#xff0c;如下所示&#xff1…

mysql互为主从失效,重新同步

一、分别登录服务器A和服务器B的mysqlmysql -u root -p 123456789二、分别查看数据库状态信息,下边两项参数有一项为NO就表示同步异常Slave_IO_Running:从服务器&#xff08;Slave&#xff09;中的 I/O 线程的运行状态Slave_SQL_Running:从服务器上的 SQL 线程是否正在运行mysq…

板凳-------Mysql cookbook学习 (十一--------6)

https://blog.csdn.net/weixin_43236925/article/details/146382981 清晰易懂的 PHP 安装与配置教程 12.6 查找每组行中含有最大或最小值的行 mysql> set max_price (select max(price) from painting); Query OK, 0 rows affected (0.01 sec)mysql> select artist.name…

ECS由浅入深第四节:ECS 与 Unity 传统开发模式的结合?混合架构的艺术

ECS由浅入深第一节 ECS由浅入深第二节 ECS由浅入深第三节 ECS由浅入深第四节 ECS由浅入深第五节 尽管 ECS 带来了显著的性能和架构优势&#xff0c;但在实际的 Unity 项目中&#xff0c;完全摒弃 GameObject 和 MonoBehaviour 往往是不现实的。Unity 引擎本身的大部分功能&…

Mac关闭触控板

打开 “有鼠标或无线触控板时忽略内建触控板”选项即可 参考&#xff1a;Mac如何关闭触控板防止误触&#xff1f;内置的设置就可以达成 - Mac天空

Python:Rich 终端富文本与界面样式工具库

🖌️ 1、简述 Rich 是一个强大的 Python 库,用于在终端中呈现富文本和精美的格式,让命令行界面(CLI)应用拥有现代、美观的输出效果。本文将深入介绍 Rich 的核心功能,并通过一系列实际示例展示其强大能力。 Rich 由 Will McGugan 开发,主要特点包括: 丰富的文本样式:支…

深入解析享元模式:通过共享技术高效支持大量细粒度对象

深入解析享元模式&#xff1a;通过共享技术高效支持大量细粒度对象 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世…

Docker高级管理

一、Docker 容器的网络模式 当项目大规模使用 Docker 时&#xff0c;容器通信的问题也就产生了。要解决容器通信问题&#xff0c;必须先了解很多关于网络的知识。Docker 的网络模式非常丰富&#xff0c;可以满足不同容器的通信要求&#xff0c;下表列出了这些网络模式的主要信息…

ABP VNext + Tye:本地微服务编排与调试

ABP VNext Tye&#xff1a;本地微服务编排与调试 &#x1f680; &#x1f4da; 目录ABP VNext Tye&#xff1a;本地微服务编排与调试 &#x1f680;TL;DR ✨一、环境与依赖 &#x1f6e0;️二、核心配置详解 &#x1f680;1. 主配置 tye.yaml三、多环境文件 &#x1f331;&am…

Vue响应式原理一:认识响应式逻辑

核心思想&#xff1a;当数据发生变化时&#xff0c;依赖该数据的代码能够自动重新执行Vue中的应用&#xff1a;在data或ref/reactive中定义的数据&#xff0c;当数据变化时template会自动更新template的本质&#xff1a; 是render()函数, 用变化之后的数据重新执行render()函数…

Redis:分组与设备在 Redis 中缓存存储设计

一、缓存存储结构设计 分组与设备的映射关系&#xff08;使用 Set 结构&#xff09;&#xff1a; 键格式&#xff1a;采用 group:{groupId}:devices 的格式作为 Redis 中 Set 的键&#xff0c;例如 group:1:devices 就代表了分组 ID 为 1 的分组所关联的设备集合。值内容&#…

Leetcode 3605. Minimum Stability Factor of Array

Leetcode 3605. Minimum Stability Factor of Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3605. Minimum Stability Factor of Array 1. 解题思路 这一题的核心思路是二分法&#xff0c;本质上就是我们给定一个常数kkk&#xff0c;然后考察是否存在一个构造使得能够…

编译安装的Mysql5.7报“Couldn‘t find MySQL server (mysqld_safe)“的原因 笔记250709

编译安装的Mysql5.7报"Couldn’t find MySQL server (mysqld_safe)"的原因 笔记250709 MySQL 的安装路径与配置文件&#xff08;如 my.cnf 或 mysql.server&#xff09;中指定的 basedir 不一致。 mysqld_safe 文件实际位置与系统查找路径不匹配&#xff08;常见于自…

在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)

&#x1f9e9; 在 Ubuntu 下配置 oh-my-posh —— 普通用户 root 各自使用独立主题&#xff08;共享可执行&#xff09;✅ 目标说明普通用户 使用 tokyonight_storm 主题 root 用户 使用 1_shell 主题 共用全局路径下的 oh-my-posh 可执行文件 正确加载 Homebrew 到环境变量中…

Spring Boot 项目中的多数据源配置

关键词&#xff1a;Spring Boot、多数据源配置、MySQL、SQL Server、Oracle、动态切换 ✅ 摘要 在实际企业级开发中&#xff0c;一个 Spring Boot 项目可能需要连接多个数据库&#xff0c;比如 MySQL、SQL Server 和 Oracle。不同的业务模块可能依赖不同的数据源&#xff0c;这…

MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷

以下是针对 MATLAB/Simulink 电机控制仿真 的系统性解决方案&#xff0c;涵盖 同步电机、异步电机、永磁电机、直驱电机、磁阻电机、双馈电机、无刷直流电机&#xff08;BLDC&#xff09; 的建模与控制策略实现&#xff0c;支持代做服务的技术细节和代码示例。一、电机建模与仿…

限流算法深度探索:从理论到实践的生产级避坑指南

凌晨3点&#xff0c;监控警报刺耳地尖叫着。我盯着屏幕上垂直下跌的服务可用性曲线&#xff0c;意识到那个被忽视的限流配置项终于引爆了——每秒1000次的支付请求正像洪水般冲垮我们的系统。这次事故让我深刻理解&#xff1a;限流不是可选项&#xff0c;而是分布式系统的生存法…