Vue脚手架（cli和vite详解）
Vue 不会强制你选择某种开发、打包方式，但vue的生态系统提供了许多工具，例如 Vue CLI 和最近的推出的Vite js。那么你应该使用 Vite 还是 Vue CLI？在做出选择的时候，了解 Vite 和 Vue CLI 之间的区别会对我们有很大的帮助。在本文中，我将带着了解一下 Vite 与 Vue CLI，以便你可以根据自己的需求做出最佳选择。
大多数 Vue 开发人员都知道，Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具。
前端脚手架是指什么？
前端项目，无论是PC或者是手机端页面存在大量可以复用的代码，脚手架就是为了快速生成可复用代码的工具，问题有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。
一、项目环境搭建
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 将提供更优秀的开发体验。
官方网址
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 的特点：
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 语法
总结知识查漏补缺，如有错误或者不足欢迎大神指正补充，在此多谢。
原文地址:https://blog.csdn.net/stc_ljc/article/details/128087419
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_18073.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
