vite初体验

最新推荐文章于 2025-06-18 08:59:31 发布
最新推荐文章于 2025-06-18 08:59:31 发布
阅读量197 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yu_Jian_Qt/article/details/131575912

创建vite项目

运行 npm create vite@latest

此时可能会抱缺少包，根据提示执行即可
在这里插入图片描述

然后输入项目名称和技术栈：
在这里插入图片描述
根据提示操作完成后的项目目录：
在这里插入图片描述

遇见的问题

1、执行npm install 后报错找不到模块
在这里插入图片描述
解决：
在这里插入图片描述

Vue3通透教程【三】Vue3代码初体验找不同
官方推荐
02-13 5万+
初体验Vite构建Vue3项目工程入口文件的不同
npm create vite@latest EsDoctorAdmin --template vue和npm i创建失败原因
m0_65756677的博客
09-23 440
执行命令：npm config set registry https://registry.npmmirror.com/清除缓存命令：npm cache clean --force。1.挂载了代理，关闭就可以了。可能是网络问题，检查一下网络。2.npm i挂载失误。
vite 初体验
小罗伯特
03-02 831
Vite是什么？ Vite 是Vue作者开发的一款想要取代webpack的工具（基于原生 ES-Module 的前端构建工具） 其原理是利用ES6的import发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去了webpack冗长的打包时间 所以本质 Vite 其实就是利用了浏览器模块化功能的一个代理转化器，转化器应该能明白吧，就是类似 .vue 转化成 .js 文件。 webpack 官网的例子已经很形象了。就把有相互依赖关系的模块，聚合转化成单个 .js 文件、单个 .css文件以及其他的一些静
Vite 初体验
weixin_49210760的博客
08-07 109
Vite 初体验。
Vite初体验
weixin_44813858的博客
02-22 855
vite 简介和一些常用插件的使用和简介
vue3.0+vite初体验
MrGuange_的博客
03-29 1174
1、准备工作 node版本要在12.0.0以上 2、创建项目 npm init vite@latest ![输入项目名称](https://img-blog.csdnimg.cn/7c5cd7237cc34f959086abefb992517d.png#pic_center) ![选择框架](https://img-blog.csdnimg.cn/9c7269a45a36464887a54adec424b651.png?x-oss-process=image/watermark,type_d3F5LXpl
vite学习（一）：vite初体验
weixin_65764828的博客
06-26 574
vite学习（一）：vite初体验
Vue3.0中vite初体验
Auroka的博客
08-27 892
先介绍下 Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 它主要具有以下特点： 快速的冷启动 即时的模块热更新 真正的按需编译 话不多说，直接干 npm方式安装 $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev yarn方式安装 $ yarn cr
Vue3.0 + Vite 初体验（一）项目配置
热门推荐
weixin_43487782的博客
01-17 1万+
Vue3.0 已经发布一段时间了，特别是还发布了一个打包构建工具 Vite，据说是可以干掉 webpack 的，趁这段时间有空，本人也体验了一下。 想使用 Vue3.0 不一定要用 Vite，vue-cli 也可以构建。 $ npm install -g @vue/cli 确保已经升级到最新的版本： $ npm update -g @vue/cli $ vue --version 然后创建项目： $ vue create vue3-demo 选择第二个 Vue 3 Preview，或者自定义安装 使
vue3.x之Vite初体验
旭哥的博客
09-09 839
vite 使用 一、项目搭建 <project-name>为项目名 $ npm init vite-app <project-name> $ cd <project-name> //进入项目目录 $ npm install //安装项目所需依赖 $ npm run dev //启动项目 二、附项目结构 三、附项目启动成功图 Vite启动极快，体验很好，与vue CLI相比目录结构变化不大，使用vue CLI的同学很快就能上手，期待正式发布。 ...
react18 vite antd design ts 后台管理模版
01-03
本文将深入探讨一个基于React 18、Vite、Ant Design以及TypeScript技术栈的后台管理模板，这款模板在当下前端开发领域中，因其优秀的性能和高效的开发体验而备受推崇。 首先，React 18作为React系列的最新版本，其...
Vite + Vue3 初体验 —— Vite 篇
qq_34621851的博客
01-22 3744
Vite 和 Vue3 在 2022 年应该不算个新事物了，但应该也有很多像我一样还没有接触过这两个 “新鲜玩意” 的。 这两样（Vite + Vue3）给我的感觉是完完全全的新鲜玩具，是新时代的潮流。 看着手里的 webpack + Vue2，想着会不会像几年前的 angularjs + gulp 一样，成为历史。 临近年关，也有了一些闲暇时间，来认识一下被人安利多次的新型前端构建工具 Vite + 全新升级的 Vue3 吧！ 从 Vite 开始 先来看看 Vite 的官方介绍吧。 可以看出，在本地开发
Vite + Vue3 初体验 —— Vue3 篇
qq_34621851的博客
01-27 1931
在上一篇 Vite + Vue3 初体验 —— Vite 篇 博客中，我感受到了 Vite 带来的运行时效率提升，这一期再来感受感受 Vue3 带来的新变化 —— 关注点分离。 Todo List 设计 这次体验 Vue3，我想做一个能体验（部分） Vue3 新特性的功能模块。 想了想，用一个 Todo List 应该是比较合适的。 我们来规划一下它的功能清单吧。 输入 Todo，按下回车即可添加一条新的 Todo Item。 以列表的形式显示所有的 Todo Item。 可以将 Todo Item 标记
Vue3 Pinia Store 生命周期管理
BillKu的博客
06-15 886
场景执行方式适用情况组件卸载时清理订阅在组件中调用或清理事件监听、定时器等主动销毁 store 实例调用重置状态并移除所有订阅组件完全不再需要该 store 时Store 全局单例默认所有组件共享同一实例，无显式销毁时一直存在多数场景。
解决Vue CLI创建Vue3项目时的Babel解析错误：Unexpected token ‘.‘
Ven%的博客
06-17 32
错误本质是Node.js版本与Vue CLI要求的现代JavaScript语法不兼容。通过升级Node.js到LTS版本（推荐v18.x+）并清理依赖，95%的类似问题都能解决。经验提示：Vue生态通常优先支持Node.js LTS版本，建议开发者每半年检查一次版本生命周期（Node.js发布日历（图：Vue CLI官方Node版本要求）保持开发环境更新，可避免大部分构建问题。如遇其他Vue CLI错误，欢迎在评论区交流讨论！
vue常用框架，及更新内容
在全栈和前端徘徊的程序员
06-13 1370
Vue 生态系统中有许多常用的框架和工具，它们帮助开发者构建现代 Web 应用。以下是 Vue 常见的，以及截至 2025 年 6 月的。
Vue购物车应用实现教程
最新发布
yk_dflkg的博客
06-18 582
本教程将带领初学者开发一个基于Vue.js的购物车应用，不需要使用脚手架，仅通过引入Vue.js库即可完成。通过这个项目，你将学习Vue的基础知识，包括：完成后的购物车应用具有以下功能：对于初学者，我们采用最简单的方式搭建环境：通过CDN引入Vue.js。创建一个基本的HTML文件结构： 3. 设计购物车界面 我们设计一个简洁的购物车界面，包含以下部分：更新HTML结构： 4. 创建Vue实例和数据模型 在script标签中，我们创建Vue实例并定义数据模型： 5. 实现购物车功能 5.1 从本地存储加载数
Thymeleaf&&Vue
2301_77345975的博客
06-16 290
Vue？thyme leaf？
vite静态资源 预加载
12-27
### 实现静态资源预加载 在 Vue3 和 Vite 构建的项目中，虽然 Vite 不提供 Webpack 那样的魔法注释用于直接实现 `prefetch` 加载，但是可以通过特定的方法来模拟这一行为。对于大型路由组件，在首次访问时可能会因为资源加载而延迟显示，影响用户体验。 #### 方法一：通过 Link 标签手动设置 Prefetch 可以在 HTML 文件头部添加 `<link rel="preload">` 或者 `<link rel="prefetch">` 来指示浏览器预先下载指定文件。这种方式适用于已知未来可能使用的资源链接[^1]。 ```html <link rel="prefetch" href="/path/to/large-component.js"> ``` 这种方法简单易行，但对于动态生成的内容不太灵活。 #### 方法二：利用 Vite 插件自动处理 Public 资源 考虑到公共目录中的大量图片等静态资源占用较多空间和带宽，可以借助于 Vite 的插件功能，在应用启动之初便发起这些资源的请求。这不仅限于图片，也可以扩展到其他类型的静态资产上[^2]。 创建自定义插件或寻找社区内已经存在的解决方案，比如 `vite-plugin-imagemin` 可以帮助压缩并提前获取图像数据；或是编写脚本遍历 public 文件夹内的所有项，并将其加入到构建流程之中作为待预取的目标列表。 #### 方法三：依赖预加载机制 类似于 lodash 这样第三方库被放置到了 `.vite/deps/` 下面经过特殊编译后的版本，表明 Vite 对某些模块做了额外优化以便更快地响应初次导入的需求。因此如果存在一些经常用到却相对独立的小型工具函数集合，则可以让它们也享受到类似的待遇——即成为全局共享的一部分从而减少重复传输量[^3]。 为了更高效地管理整个项目的静态资源以及确保最佳性能表现： - 定期审查哪些资源真正有必要做前置加载； - 结合实际场景调整策略（如按需懒加载较大尺寸媒体素材）； - 利用服务端渲染 SSR 技术进一步缩短首屏呈现时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值