一、项目环境搭建
1.nodejs环境(有的话可跳过)
环境需要 要先使用npm进行管理，而使用npm需要先下载nodejs。
☞Nodejs下载地址中文官网
1.1 下载
根据自己电脑系统及位数选择，我的电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。
1.2下载你完成后傻瓜式安装(具体可以网上找教程哦)
1.3安装完成后可进入终端查看一下node是否安装成功
node -v 查看是否安装成功 node.js
npm -v
在前面设置好nodejs相关的配置之后，我们可以直接使用npm工具拉取vue-cli脚手架
二、关于cli脚手架
cli介绍
CLI 脚手架，可以把许多项目通用的依赖包(vue、axios、webpack、路由、vuex、less编译器等等一些第三方插件工具) 和 通用的配置都给安装配置好，使得开发者可以把全部的注意力都集中在业务层面，明显提升开发效率，真实项目都要使用脚手架开发。Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。
官方网址
- vue对cli讲解官网
cli脚手架创建项目步骤
1.使用命令：进行全局安装和卸载
npm install -g @vue/cli #安装
npm uninstall -g vue-cli 卸载
2.使用vue - v查看vue的版本，检验是否安装成功。
vue -v 或者 vue -version #查看cli脚手架版本
3.使用cli创建项目
vue create 项目名 #创建项目
4.选择好之后开始创建
5.创建完成后切换到项目文件夹启动项目
6.cli脚手架项目创建完成
三、关于vite脚手架
vite介绍：
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者， 是作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
vite 提供了用 npm 或者 yarn 一建生成项目结构的方
vite官网：
- ☞vite官网中文版
☞vite官网英文版
Vite 的特点：
1.快速的冷启动，不需要等待打包
2.即时的热模块更新
3.真正的按需编译，不用等待整个项目编译完成
vite脚手架创建项目步骤
1.开始构建vite项目
npm init vite@latest #初始化vite项目
或者
npm create vite@latest #创建vite项目
Project name: #给脚手架文件件起个项目文件名字
相当cli，vite搭建起来就比较快捷了，那我就通过图的方式展示吧。按照步骤一步一步走即可
2.选择脚手架使用的框架(常用vue和react)
3.根据醒目需要选择是否使用TS(TypeJavaScript)，如果不需要选择JS(JavaScript)即可
4.安装依赖和启动项目
cd 项目文件夹
npm i 或者 npm install 安装依赖
安装插件或第三方库
npm i -g 插件名 #不同的可以看官方文档哦
npm run dev 启动项目
5.启动vite脚手架项目
这样就搭建完成了，通过创建相信大家体会到vite创建要比cli创建速度快
四、vue官方推荐使用vite
与 Vue CLI 类似，Vite 也是一个提供基本项目脚手架和开发服务器的构建工具。Vite 并不是基于 Webpack 的，它有自己的开发服务器，利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建，速度也更快。
**
1.那么Vite 怎么这么快？
Vite快主要体现在两个方面：快速的冷启动和快速的热更新。而vite之所以能如此优秀，完全基于他借助了浏览器对ESM规范的支持，采取了与Webpack完全不同的unbundle机制。同一个小型项目，Webpack启动需要25s左右，而Vite只需要2s左右。
1. 快速的冷启动
2.模块之间的依赖关系的解析由浏览器实现
3.文件的转换由 dev server 的 middlewares 实现并做缓存
4.不对源文件做合并捆绑操作
2.vite快速的热更新
除了 dev server 启动外， Vite 在热更新方面也有非常优秀的表现。修改原文件后，Webpack发生耗时大概 5 s 的重新编译打包过程, 而vite更是做到了毫秒级的效果。由于 Vite 采用 unbundle 机制，所以 dev server在监听到文件发生变化以后，只需要通过ws` 连接通知浏览器去重新加载变化的文件，剩下的工作就交给浏览器去做了。
3.Vite的缺点
和 bundle 机制有利有弊一样，unbundle 机制给 Vite 在dev server方面获得巨大性能提升的同时，也带来一些负面影响，那就是首屏和懒加载性能的下降。
1.生态不及webpack，加载器、插件不够丰富
2.打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
3.项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
总结知识查漏补缺，如有错误或者不足欢迎大神指正补充，在此多谢。
最后更多分享：前端字节跳动真题解析
ack，加载器、插件不够丰富
2.打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
3.项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
---
#总结知识查漏补缺，如有错误或者不足欢迎大神指正补充，在此多谢。
##最后更多分享：**前端字节跳动真题解析**
- [外链图片转存中...(img-hOds0ih8-1718562191060)]
