使用Vite从零搭建前端项目

篇首语：本文由编程笔记#小编为大家整理，主要介绍了使用Vite从零搭建前端项目相关的知识，希望对你有一定的参考价值。

首先&＃xff0c;请确保已经安装了代码编辑器和浏览器&＃xff0c;如果没有安装推荐安装VSCode和Chrome浏览器。

其次是安装 Node.js&＃xff0c;如果你的系统中还没有安装 Node.js &＃xff0c;可以进入 Nodejs 官网下载相应的安装包进行手动安装&＃xff1b;如果已经安装了 Node.js&＃xff0c;你可以使用这个命令检查一下 Node.js 版本。

node -v


如果安装了多个版本的Node.js&＃xff0c;推荐使用 nvm 工具切换 Node.js 版本。安装完 Nodejs 之后&＃xff0c;包管理器npm也会被自动安装&＃xff0c;你可以执行下面的命令来验证。

npm -v


当然&＃xff0c;在现代的前端项目中&＃xff0c;我非常不推荐使用 npm 作为项目的包管理器&＃xff0c;甚至也不再推荐yarn(npm 的替代方案)&＃xff0c;因为两者都存在比较严重的性能和安全问题&＃xff0c;而这些问题在 pnpm 中得到了很好的解决。使用pnpm之前&＃xff0c;需要先安装它&＃xff0c;命令如下:

npm i -g pnpm


由于默认的镜像源在国外&＃xff0c;包下载速度和稳定性都不太好&＃xff0c;因此我建议你换成国内的镜像源&＃xff0c;这样pnpm install命令的体验会好很多。

pnpm config set registry https://registry.npmmirror.com/

二、初始化项目

接下来&＃xff0c;我们需要初始化一个Vite项目&＃xff0c;可以在终端命令行中输入如下的命令来初始化Vite项目。

pnpm create vite


在执行完这个命令后&＃xff0c;pnpm 首先会自动下载 create-vite 这个第三方包&＃xff0c;然后执行这个包中的项目初始化逻辑。

首先&＃xff0c;是输入项目名称&＃xff0c;这里你可以输入vite-project&＃xff0c;然后按下回车&＃xff0c;进入选择前端框架的部分&＃xff1a;

✔ Project name: vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla // 无前端框架
vue // 基于 Vue
> react // 基于 React
preact // 基于 Preact&＃xff08;一款精简版的类 React 框架&＃xff09;
lit // 基于 lit&＃xff08;一款 Web Components 框架&＃xff09;
svelte // 基于 Svelte


Vite 内置了以上不同前端框架的脚手架模板&＃xff0c;这里我们选择react框架&＃xff0c;&＃xff0c;紧接着选择react-ts完成命令交互。等待脚手架的模板生成完毕&＃xff0c;接下来执行如下命令在本地启动项目&＃xff1a;

// 进入项目目录
cd vite-project
// 安装依赖
pnpm install
// 启动项目
pnpm run dev