一、背景知识介绍
1、构建工具介绍
Vite, Webpack,Rollup, Parce
构建工具 | 优点 | 缺点 |
---|---|---|
Vite | - 快速启动,秒级热更新,更快的构建速度,更好的开发体验; - 支持 Vue3 和 ES modules 的原生特性,轻松实现按需加载。 - 对于单页应用和小型项目的构建效率高 - 可以快速地启动开发服务器 - 能够快速实现 SSR - 对于ESM的支持更加友好 |
- 对于大型项目构建效率不高 - 不支持IE11及以下浏览器 |
Webpack | - 功能强大、可配置性高 - 支持各类资源的处理、打包和优化 - 支持热重载和模块热替换 - 社区支持广泛、插件丰富 |
- 学习成本较高,配置文件繁琐,构建速度慢; - 初学者可能会遇到各种问题,需要不断深入学习和实践; - 大型项目的构建成本可能较高。 - 初次构建时间长 - 构建速度较慢 |
Rollup | - 构建速度快、效率高 - 生成的代码体积小 - 对代码进行静态分析和优化 - 支持Tree shaking等高级特性 |
- 对于需要动态加载的项目不太友好 - 配置较为复杂 - 处理HTML、CSS、图片等资源相对不太方便 |
Parce | - 零配置、自动化高 - 开箱即用、易上手 - 支持多种资源的打包和优化 - 构建速度较快 |
- 对于一些高级需求不太友好 - 不支持Tree shaking - 社区生态相对不够完善 |
2、包管理/依赖更新工具
-
npm, pnpm, yarn
-
npm: 安装Node.js 后就可以使用
-
pnpm: 即使没有Node.js,也可以直接安装pnpm,也可以使用npm安装,npm install -g pnpm
-
yarn: npm install -g yarn
3、框架的选择
脚手架(框架):用于初始化,创建项目,选择性安装需要的插件,指定统一的风格,生成demo。
-
React是一个用于构建Web应用程序UI组件的JavaScript库,主要用于构建UI
-
Angular是一个由Google支持的基于TypeScript的JavaScript框架。这是一个非常受欢迎的前端开发框架。Angular是作为Angular 2或Angular发布的,它构成了AngularJS(框架的第一个版本)的重写。
-
Vue.js是讨论最多且发展最快的JavaScript框架之一
-
Vanilla 是一款以Openresty为基础的框架,它以简洁、高效的特性吸引了众多开发者的目光。Vanilla不仅仅是一个简单的工具集,更是一个完整的生态系统,提供了一系列组件,如Bootstrap、Router、Controllers、Models和Views,帮助开发者快速构建稳定且高性能的Web应用程序。
二、项目的部署
项目构建
Vue2 的脚手架有一种:VueCli
Vue3 的脚手架有两种:VueCli + Vite
Vite: 是优化了rollup构建工具, VueCli 使用的Webpack构建工具。
推荐使用 Vue3