yarn create vite创建vue3项目

一、首先安装node.js

安装了node才可以使用npm命令

二、通过npm安装yarn

全局安装yarn： npm install -g yarn 验证是否安装成功，查看yarn版本： yarn -v

三、yarn创建vue项目

yarn create vite

• 输入项目名称，如：helloVue3
• 输入软件包名称，如：package.json
• 选择框架，如：Vue
• ...... 根据提示输入命令：

cd helloVue3  #切换到项目目录
yarn          #安装项目的全部依赖
yarn dev      #启动服务

完成之后就可以通过这个地址打开本地服务

四、yarn与npm包管理工具的区别

• 使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。
• npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。
• npm的输出信息比较冗长，在执行npminstall命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。

五、vite与webpack构建的区别

1. 构建方式：

• Webpack是一个传统的打包工具，基于文件系统的构建。它将所有的代码、资源（如图片、CSS）打包成一个或多个文件，然后在浏览器中加载。
• Vite 是基于现代浏览器特性的开发服务器，它采用了按需编译和热模块替换（HMR）。Vite 在开发模式下不进行打包，而是通过 ES 模块直接加载源码。

2. 构建性能：

• Webpack 在开发时需要较长时间的初始构建，因为它会将整个项目打包成一个文件，导致构建时间较长，特别是在大型项目中。
• Vite 采用了浏览器原生支持的 ES 模块，能够在开发时通过按需加载和模块热替换显著提高性能，尤其是对于大型项目，它的构建速度较快。

3. 构建产物：

• Webpack 输出的构建产物通常是优化后的 JavaScript、CSS 和图片等，适合生产环境。
• Vite 采用了基于 Rollup 的优化，生成高效的生产构建，且支持更灵活的模块化处理。 vite构建： 直接Server Ready，看哪个就加载哪个 webpack构建： 每个路由和模块分析完之后才Server Ready