构建工具学习第2天 (vite)

已于 2023-03-01 10:52:28 修改
阅读量102 收藏
点赞数
分类专栏： 笔记 文章标签： 学习 前端 vite
于 2023-03-01 10:13:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45621877/article/details/129274945
版权
生成开发服务器 链接http://localhost:5173/打开项目。预览打包后代码， 启动项目 http://localhost:4173/打包 会生成dist文件夹。
摘要由CSDN通过智能技术生成

相较于webpack：

  • 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
  • 在项目部署时，在对项目进行打包
  • 除了速度外，vite使用起来也更加方便

基本使用

  1. 初始化项目
npm init -y      #省去一步一步回车  直接安装完成，生成package.json
  1. 安装vite
npm i -D vite      #在实际开发中不会这样安装，会直接构建一个vite项目
  1. 直接在根目录下新建一个index.html 和index.js，跟webpack不同的是，vite项目开发直接就在根目录下
  2. 在package.json中配置启动命令
  "scripts": {
最低0.47元/天 解锁文章
大盗夕落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3通透教程【二】更高效的构建工具—Vite
官方推荐
02-06 6万+
为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！
去中心化的前端构建工具 — Vite
m0_60028455的博客
06-08 3235
为什么要使用Vite 在浏览器中提供ES模块之前，开发人员没有以模块化方式编写JavaScript的本机机制。这就是为什么我们都很熟悉“捆绑”的概念:使用工具来抓取、处理和连接源模块到可以在浏览器中运行的文件中。 随着时间的推移，我们看到了webpack、Rollup和Parcel等工具，它们极大地改善了前端开发人员的开发体验。 然而，当我们开始构建越来越多雄心勃勃的应用程序时，我们要处理的JavaScript数量也呈指数级增长。对于大型项目来说，包含数千个模块并不罕见。我们开始遇到基于JavaScript
Vite 的打包和预览功能
weixin_42776027的博客
09-09 8288
而在打包成功后，我们通常需要在浏览器中测试一下打包出来的东西有没有问题，那么一种方法是通过。而在开发完成后，我们需要将项目代码打包到指定的输出文件夹（比如。）中，之后再到服务器中部署打包出来的这个文件夹。而如果是在打包之后，想要预览打包出来的代码的效果，那就执行。之后，如果是在开发阶段想要把项目跑起来，那就直接执行。这个预览的效果也就是我们打包出来的效果。当然，在真实开发中，我们一般不会一直敲。打包成功后，会在项目目录下生成一个。会默认把我们的代码打包进。文件中会存放第三方的资源。的打包和预览功能的说明。
Vite+Vue3+quasar 打包后本地预览失败
KKDKK_的博客
03-26 482
vite打包项目，本地预览失败
Vite执行npm run serve后浏览器报Cannot GET /
勇敢阿呆的部落阁
11-14 4518
在使用 Vite 时，想像以前执行 npm run serve 一样，查看生产环境的应用。 在执行后并未发现异常，但在浏览器访问时，显示 Cannot GET /，说是找不到根目录。 在网上查找解决方案，发现并没有结果。可能是还没有人踩到这个坑。 查看了 package.json 文件中的 scripts，运行 npm run serve 执行的是 vite preview. "scripts": { "dev": "vite", "build": "vue-tsc --noEmit &&a
认识前端构建工具 Vite
薛定谔的猫-前端领域
05-25 1574
是什么？ Vite（法语意为 "快速的"，发音 /vit/）。由两部分组成： 基于原生 ES 模块的开发服务器，，包括模块热更新（HMR）等功能。vite 解决了webpack中存在的HMR 速度与随着应用越大而越慢的问题。 基于 Rollup 的配置化的打包器（构建指令），可输出用于生产环境的高度优化过的静态资源。同时使用 esbuild 替代 Rollup 进行预打包（非生产环境），速度很快。 Vite 是 Opinionated 的，通过约定保证了易用性——前端开发者常用的功能都是开箱即用...
Vite: 新一代高效的前端构建工具
最新发布
Wang的专栏
06-22 1003
随着前端技术的飞速发展，构建工具在项目开发中扮演着至关重要的角色因为项目日益复杂，开发体验和构建效率成为了开发者关注的焦点在众多前端构建工具中，Vite凭借其独特的优势，逐渐成为开发者们的新宠Vite，作为一个新兴的前端构建工具，由尤雨溪（Vue.js的作者）于2020年推出旨在解决传统构建工具如Webpack在开发环境中的启动慢、热更新延迟等问题为开发者带来了前所未有的开发速度和体验提升本文将深入探讨Vite如何解决了webpack的一系列问题，其毫秒级响应的原理。
Vite构建工具
shmilynn_的博客
06-15 117
深入浅出vite构建工具 、追逐新技术!
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 2316
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
尤雨溪-Vite 对下一代前端工具的思考.pdf
09-09
Vite 是一种新的前端构建工具，旨在提供更快、更灵活的开发体验。Vite 由尤雨溪创造，旨在解决传统构建工具的性能瓶颈。Vite 的设计基于两个新趋势：现代 JavaScript 的广泛支持和新的 JS 编译器。 Vite 的架构由两...
vite+vue2的项目基础包
06-17
Vite是Vue.js官方推出的一款现代化的前端构建工具，它采用了与传统Webpack不同的工作方式，提供了更快的开发环境启动速度和热更新体验。Vue2则是Vue.js框架的第二代版本，稳定且广泛应用于各种项目中。这个“vite+...
vite2-project:vite2的一个项目
04-07
Vite2 是一个由 Vue.js 作者尤雨溪开发的现代化前端构建工具，它采用了全新的构建思路，提供了更快的开发环境启动速度和更高效的热更新机制。与传统的 Webpack 构建工具相比，Vite2 在开发阶段有着显著的优势，为...
vite2-vue3-playground:快速2 +查看3游乐场项目
04-10
"Vite 2 + Vue 3游乐场项目"是这个项目的核心概念，它强调了Vite 2作为构建工具与Vue 3框架的结合，提供了一个实验性的、交互式的开发环境。"游乐场"一词暗示了这是一个供开发者尝试新功能、实践编程技巧和熟悉新...
移动端vue3+vite+vant 框架
07-19
2. **Vite 构建工具**： - Vite 利用了ES模块的动态导入特性，提供近零配置的开发体验。在开发阶段，Vite 可以实现秒级重启和热更新，显著提升开发效率。 - Vite 支持按需编译，仅编译实际使用的文件，减少了构建...
用Nginx打包部署vue3项目及404和500解决
weixin_45621877的博客
02-09 3474
这时候可以去任务管理器中查看 是否启动成功，成功可以在任务管理器进程中看到。这个是我的配置，大家可以查看上面 第3 步 配置的具体是什么。可以看到successful 配置成功。6. 在浏览器中访问配置的路径。4. 去cmd中检查一下配置的文件，访问之后再次刷新页面会报404。5. 启动 Nginx。
vue3+vite项目启动后自动打开浏览器配置
weixin_45621877的博客
02-02 2742
1）. 找到左侧目录中的package.json文件，在。2）在启动后面加上 --open 即可。立即启动 并打开浏览器。
react+antd中的onchange在监听值的变化时报错解决办法
weixin_45621877的博客
09-19 2499
在项目中监听change值变化的时候报错This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the propertytargeton a released/nullified synthetic event <TextArea className="markdown-content" rows={35}
es6中的模块化 import 和import{} import()的区别和使用
weixin_45621877的博客
02-04 2110
注意，需要放在服务器环境 在ES6之前，社区制定一套模块规则 Commonjs 主要服务端 nodeJs require(‘http’) AMD require,curlJs CMD seaJs ES出来，统一服务端和客户端模块规范 定义模块export，引入模块import a).如何定义模块？ ...
vite vue TSX
02-06
Vite 是一个由 Vue.js 作者开发的现代前端构建工具，主要用于加快构建速度和开发速度。Vue.js 是一种用于构建用户界面的渐进式框架。TSX 是 TypeScript 的一种扩展，它允许在 JavaScript 文件中使用类似 TypeScript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值