Vue脚手架（cli和vite详解）

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 将提供更优秀的开发体验。

官方网址

• 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 语法

---

总结知识查漏补缺，如有错误或者不足欢迎大神指正补充，在此多谢。