Vue学习记录之一 脚手架的及常见框架组件的使用

一、背景知识介绍

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值