Vue3+Vite快速搭建vue项目

webpack的特点
Vite较webpack不同与改进之处
Vite缺点
安装node.js(正文开始，已安装的可以跳过此步骤)
npm镜像设置及cnpm安装
使用vite快速搭建vue项目

webpack的特点

webpack打包过程
- 1.识别入口文件
- 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖
- 3.webpack做的就是分析代码。转换代码，编译代码，输出代码
- 4.最终形成打包后的代码
webpack打包原理
- 1.先逐级递归识别依赖，构建依赖图谱
- 2.将代码转化成AST抽象语法树
- 3.在AST阶段中去处理代码
- 4.把AST抽象语法树变成浏览器可以识别的代码，然后输出
wepback牛逼之处在于loader和plugin非常丰富,不过大多数博主都认为生态只是时间问题，毕竟vue也是很短时间就迅速火起来的
webpack缺点一。缓慢的服务器启动，当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。
webpack致命缺点：热更新效率低下
- 当基于打包器启动时，编辑文件后将重新构建文件本身。显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积增长而直线下降。
- 一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时使模块图的一部分失活，但它也仍需要整个重新构建并重载页面。
- 这样代价很高，并且重新加载页面会消除应用的当前状态，所以打包器支持了动态模块热重载（HMR）：允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。
- 这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。
而Vite的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合
然后再返回给浏览器，Vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多！

Vite较webpack不同与改进之处

Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。
依赖大多为纯 JavaScript 并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。
依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。
Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。
同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。
Vite 以原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。
在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

Vite缺点

主要在于目前的生态不够webpack成熟，但是只要能弥补这个缺点，便有很大概率能替代目前webpack的大部分市场
prod环境的构建目前用的Rollup，原因在于esbuild对于css和代码分割不是很友好
还没有被大规模使用,很多问题或者诉求没有真正暴露出来
vite真正崛起那一天，是跟vue3有关系的,当vue3广泛开始使用在生产环境的时候，vite也就大概率意味着被大家慢慢开始接受了

安装node.js(正文开始，已安装的可以跳过此步骤)

进入官网 nodejs官网下载长期维护版
打开安装，安装目录可以自己改成别的盘路径，其他步骤直接默认一直点击next即可
安装完成后，打开cmd输入npm -v和node -v都应该出现版本号

npm镜像设置及cnpm安装

为了加速下载的速度，特此配置镜像地址及安装cnpm国内淘宝镜像
在cmd内输入以下命令，配置npm镜像地址

npm config set registry https://registry.npmmirror.com

在cmd内安装cnpm命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用vite快速搭建vue项目

继续在cmd命令行中输入命令

npm init @vitejs/app

接着输入y继续执行步骤

-输入项目名称，此时本博主输入的是test
接着提示可以直接输入命令运行项目了，而且整个流程耗时极为短暂，使用起来很方便快捷

cd test
npm install
npm run dev

Vue3+Vite快速搭建vue项目相关推荐

Vue笔记——搭建脚手架并快速创建Vue项目
现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...
Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
VSCode搭建Vue项目
个人资源与分享网站:http://xiaocaoshare.com/ 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安 ...
关于搭建Vue项目的顺序及遇到的问题
关于搭建Vue项目的顺序前言:笔者在搭建Vue项目中遇到了许多问题,当最后解决的时候,仍然对这个过程的来龙去脉极为模糊,在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结 ...
创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
使用veu-cli3/4搭建vue项目详细配置
文章目录使用vue-cli4 搭建vue项目一.安装vue-cli4 二.创建一个vue项目三.预设选项四.启动项目五.可视化UI 使用vue-cli4 搭建vue项目一.安装vue-cl ...
快速搭建Springboot项目的两种方式！！
大家好,我是雄雄,欢迎关注微信公众号[雄雄的小课堂]. 前言 Springboot的特点就是简单.快速和方便,使用idea不到一分钟就可以快速搭建springboot项目,并且,在这里,你不用写spr ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇

Vue3+Vite快速搭建vue项目

Vue3+Vite快速搭建vue项目

webpack的特点

Vite较webpack不同与改进之处

Vite缺点

安装node.js(正文开始，已安装的可以跳过此步骤)

npm镜像设置及cnpm安装

使用vite快速搭建vue项目

Vue3+Vite快速搭建vue项目相关推荐

最新文章

热门文章