一、首先安装node.js
安装了node才可以使用npm命令
二、通过npm安装yarn
全局安装yarn： npm install -g yarn 验证是否安装成功，查看yarn版本： yarn -v
三、yarn创建vue项目
yarn create vite
- 输入项目名称，如：helloVue3
- 输入软件包名称，如：package.json
- 选择框架，如：Vue
- ......
根据提示输入命令：
bash
cd helloVue3 #切换到项目目录
yarn #安装项目的全部依赖
yarn dev #启动服务完成之后就可以通过这个地址打开本地服务
四、yarn与npm包管理工具的区别
- 使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。
- npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。
- npm的输出信息比较冗长，在执行npminstall命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。
五、vite与webpack构建的区别
- 构建方式：
- Webpack是一个传统的打包工具，基于文件系统的构建。它将所有的代码、资源（如图片、CSS）打包成一个或多个文件，然后在浏览器中加载。
- Vite 是基于现代浏览器特性的开发服务器，它采用了按需编译和热模块替换（HMR）。Vite 在开发模式下不进行打包，而是通过 ES 模块直接加载源码。
- 构建性能：
- Webpack 在开发时需要较长时间的初始构建，因为它会将整个项目打包成一个文件，导致构建时间较长，特别是在大型项目中。
- Vite 采用了浏览器原生支持的 ES 模块，能够在开发时通过按需加载和模块热替换显著提高性能，尤其是对于大型项目，它的构建速度较快。
- 构建产物：
- Webpack 输出的构建产物通常是优化后的 JavaScript、CSS 和图片等，适合生产环境。
- Vite 采用了基于 Rollup 的优化，生成高效的生产构建，且支持更灵活的模块化处理。 vite构建： 直接Server Ready，看哪个就加载哪个
webpack构建： 每个路由和模块分析完之后才Server Ready