《从零开始学习Vite》 第一章：搭建前端项目

已于 2024-06-19 17:27:00 修改
阅读量1.1k 收藏 11
点赞数 24
文章标签： 学习 前端 react.js vue.js node.js npm
于 2024-05-22 11:11:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_64019547/article/details/139114434
版权

🍎 系列文章

在系列中，将从零学习Vite，系统梳理 Vite 本身的知识，也包括 Vite 底层所使用的 Esbuild、Rollup 双引擎、Babel 编译工具链、模块规范标准等等构建生态。

《从零开始学习Vite》 第一章：搭建前端项目

《从零开始学习Vite》 第二章：接入 CSS 工程化方案

《从零开始学习Vite》 第三章：静态资源处理

《从零开始学习Vite》第四章：自动化代码规范工具的使用

前言

使用 Vite 的初始化命令创建一个React项目，让你理解这个项目究竟是如何运行起来的，不仅体验到 Vite 的快速和轻量，同时也能学会基本的前端开发环境的搭建，安装编辑器、Node.js环境、包管理器pnpm。

环境搭建

首先推荐安装 VSCode 和 Chrome 浏览器

安装 Node

最低0.47元/天 解锁文章
Vettel-qin
关注
Vite学习指南
m0_68271787的博客
01-27 1705
号，另外呢他告诉我们新行必须要求我们在这个末尾上添加一下，那很显然，我们需要手工的去做一些。我们可以把这个给改一下，改完了以后我们看到这个文件就没有任何的关于也是语法的问题了，那接下。再去打开一个文件，再去打开一个文件，再去打开一个文件，我们看到呢这里头貌似好像都满足了们所。保存一下，好，我们看到了这里头这个提示就不存在了，我们再次执行一下。保存一下，那接下来我们来去看一下重新的检查，我们再去进行一次这个提交。，安装好了以后呢，我们回到我们代码里边，很显然这一步还不够，我们得需要去安装。
《从零开始学习Vite》第四章：自动化代码规范工具的使用
vettel的博客
06-19 1053
在多人协作的工程项目中，代码规范是非常重要的，它可以统一团队代码风格，避免不同风格的编码混杂在一起难以阅读，在开发阶段可以提前规避一些语法错误，从而有效提高代码质量。包括：ESLint、Prettier、Stylelint、Commitlint等主流Lint工具的使用，还会配合husky、lint-staged、VSCode插件和Vite插件，搭建完整的前端开发和代码提交工作流。
vite的学习与使用
最新发布
m0_51429350的博客
04-08 853
构建工具是‌帮助开发者自动化完成代码编译、测试、打包、部署等重复性任务的软件工具‌。它们通过简化和标准化开发流程，显著提升开发效率和项目质量。Vite 是新一代‌前端构建工具‌，由 Vue.js 作者尤雨溪团队开发，核心目标是‌提升前端开发效率‌。其设计颠覆传统构建工具（如 Webpack）的全量打包模式，利用现代浏览器原生 ES 模块（ESM）实现按需编译，大幅优化开发体验。vite的配置文件在根目录下创建vite.config.js。Vite 的‌核心构建功能‌和‌配置处理‌配置文件处理。
vite多页面打包学习（一）
huangfengnt的博客
01-17 8200
学习一下多页面的打包
Vite学习
顺拐小乌龟的博客
11-08 607
Vite 学习什么是Vite为什么用Vite创建Vite项目配置文件 什么是Vite Vite是一种新型前端构建工具，最大的特点是快！冷启动快，热更新快，打包也快。主要包含两部分功能： 1.开发服务器：基于原生ES模块特性，提供丰富的内建功能； 2.构建指令：使用Rollup打包代码，可输出高度优化后的静态资源。 为什么用Vite 随着项目越来越大，JavaScript代码量指数级增长，此时诸如webpack等工具启动开发服务器需要很长时间，即使热更新HMR也需要几秒钟才能在浏览器中反应，严重影响了开
Vite基础学习
m0_56772756的博客
06-14 1198
Vite是Vue团队的官方出品，背靠这么大的生态，Vue-cli会在下面两个版本中将vite作为预设构建工具未来你使用vue-cli去构建vue项目的时候你要写的vue.config.js不再是webpack的配置而是vite的配置(目前只基于浏览器项目）Vite也支持直接构建react项目，也支持构建angular项目，svelte项目也支持构建。
vite 学习路径
wsl3465205046的博客
02-23 453
1. 了解 Vite 介绍 Vite 是什么以及它的作用。 Vite 是一个现代化的构建工具，旨在提供更快的开发体验。 2. 安装和配置 使用 npm 或 yarn 安装 Vite。 创建一个新项目并进行基本配置。 3. 开发模式 学习如何启动 Vite 的开发服务器。 理解 Vite 如何利用现代浏览器的原生 ES 模块支持。 实践热重载和实时更新功能。 4. 生产构建 学习如何使用 Vite 进行生产构建。 了解如何通过命令行或配置文件进行生产构建。 理解 Vite 如何优化构建输出
《从零开始学习Vite》 第二章：接入 CSS 工程化方案
vettel的博客
05-24 1192
CSS 方案是前端工程化必不可缺的，在最原始的开发阶段都是手写原生的 CSS，但原生 CSS 存在浏览器兼容问题、开发体验差、样式污染、打包产物体积过大等诸多问题，因此社区出现了不少 CSS 工程化解决方案，有CSS 预处理器、CSS Modules、PostCSS 、CSS in JS 和 CSS 原子化框架，下面我们将在 Vite 中落地这些 CSS 工程化方案。
vue3前端组件库的搭建与发布（一）
qq_38133850的博客
09-19 2279
最近在做公司项目中，有这么一件事情，很是头疼，就是同一套代码，不同项目，要改相同bug，改好多遍，改的都想吐，于是就想做一个组件库，这样更新一下就全都可以了，当然也是第一次主导组件库的搭建，有哪些不对的，还请各位大佬指出来哈。
Vue3 + Vite + TypeScript单元测试：搭建与实践完全手册
本文针对现代前端开发中日益复杂的Vue3、Vite和TypeScript技术栈，详细探讨了如何搭建一个高效、可靠的单元测试环境。文章首先介绍了项目搭建的基础，包括单元测试理论、框架选择与配置，以及Vue组件的测试实践。...
vite学习之路（一）初识vite，vite的使用与工作机制
热门推荐
zem
10-31 3万+
最近闲下来后开始整理之前的知识了，早在vue3.0正式出来之前，尤大就已经提到了做了一个新的web应用开发工具vite 解下来的几篇文章我会对vite的使用，到与webpack（其实应该是webpack-dev-server，后面会解释为什么）的比较，以及源码解析，简单地实现vite部分功能来写，欢迎大家在评论区提出各种建议问题 那么话不多说，开始vite学习之路 vite是什么 首先，vite为什么叫做vite，vite实际上是法语中快的意思，所以顾名思义，这个工具给我们带来的就是更快的开发体验，它实际上
vite学习详解
fury的博客
01-06 3530
之前vite2刚出的时候其实已经自学过一波，但是老实说学起来完全不入脑，一方面本来这方面的基础就很差（指项目配置），另一方面学的时候没有跟着去动手，纯理论的学那完全就是越看越困。最后就是急躁，想一下就学完。所以到现在来说基本上就是零基础。这次痛并思痛，跟着文档一步一步来。[1]overview是用来干什么的一目了然：提高开发体验感的，并且仅支持标准（现代）浏览器（>= IE 9`？不清楚9算不算，但是没差，IE已经不再维护了）。注意这里是”()开发“，而打包还是交由rollup处理。拥抱。
vite学习
mnbcx123的博客
10-15 239
一、 为什么使用vite，vite的好处 原生的js是没有模块机制的，到了ES6才提出ES的模块机制，所以人们习惯使用打包工具对代码进行处理，使其可以直接再浏览器中使用，但是随着代码的指数级增长，造成了服务启动慢，HMR慢，对我们的程序开发造成了非常不好的体验。vite旨在解决以上的问题 改变服务器启动 vite吧打包氛围两个部分，用esbuild打包依赖，然后用ES模块的方式提供源码，源码部分可以做到根据路由的方式按需引入 改变HMR 更新方式的变化，初级整个模块重新打包更新，之后热更新某个模块，vite
Vite的学习
qq_41369132的博客
03-11 341
Vite和Vue-cli的对比 Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则。 Vue-cli开发模式下必须对项目打包才可以运行 Vite基于缓存的热更新 Vue-cli基于webpack的热更新 不打包不会对浏览器造成阻塞吗？ 不会，因为Vite可以开启http2来启动多路复用 Vite生产环境环境下需要打包吗？ 需要，尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为
vite学习教程01、vite构建vue2
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 2039
本文详细介绍了如何使用Vite初始化Vue 2项目，包括创建项目、安装依赖、修改配置文件、安装Vue 2及其Vite插件，并启动开发服务的完整流程。通过具体命令和代码示例，文章指导读者一步步完成从项目搭建到服务启动的全过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值