前端Vue3之基础知识点碎片

embedded/2024/12/21 22:51:37/

1、Element Plus是啥?

Element Plus 是一个基于 Vue 3 框架构建的开源 UI(用户界面)组件库,旨在帮助开发者快速搭建企业级的 Web 应用程序界面。Element Plus 提供了一系列预先设计好的高质量 UI 组件,这些组件涵盖了诸如表单控件、表格、按钮、导航菜单、通知提示等各种常见和复杂的界面需求,从而极大地简化了开发工作流程,提升了开发效率。此外,它还注重一致性、简洁性与用户体验,提供了详尽的文档和示例代码,支持主题定制和表单验证等功能,是 Vue 3 生态中广受欢迎的一款组件库。

2、Vite和Vue Cli是啥?

Vite 和 Vue CLI 都是用于构建 Vue.js 应用程序的工具,它们分别代表着不同的构建和发展思路。

2.1、Vue CLI (Vue Command Line Interface): 


        Vue CLI 是 Vue.js 官方推出的一套基于 Webpack 构建工具的命令行工具,它提供了一个开箱即用且高度可配置的项目脚手架,用来快速搭建Vue应用的基础结构。Vue CLI 包含了大量的预设(preset)、插件系统以及一个图形化的用户界面(GUI),允许开发者通过简单的命令行操作或可视化界面来创建、开发和部署 Vue.js 项目。由于基于 Webpack,Vue CLI 可以处理各种复杂的构建场景,如代码分割、Tree Shaking、CSS 处理、图片优化等。

2.2、Vite ( vitejs/vite ):


Vite 是由 Vue.js 作者尤雨溪主导开发的新一代前端构建工具,特别针对 Vue.js 应用进行了优化,但它同样支持 React 和其他前端框架。Vite 不再直接依赖 Webpack,而是利用浏览器原生支持的 ES 模块导入机制,在开发环境中能够做到几乎无须打包即可快速启动项目,显著提高开发时的热更新速度。Vite 使用 Rollup 进行生产环境下的构建打包,相较于 Webpack,Rollup 在某些场景下能提供更高效的构建速度和更小的输出体积。

简而言之,Vue CLI 更偏向于提供一种全面、稳定且高度灵活的传统前端构建方案,适合大型复杂项目;而 Vite 则是探索并实现了轻量级、高性能的新型开发模式,尤其关注提升开发体验,同时也确保了生产环境下的打包效果。随着技术发展,Vite 得到了越来越多的关注,并逐渐成为许多新项目构建 Vue.js 应用程序的首选工具。

3、Webpack是啥?

        Webpack 一般出现在现代化的前端开发流程中,尤其是在构建复杂 web 应用程序时。当你有一个包含很多不同类型的资源(例如 JavaScript、CSS、图片、字体、模板文件等)的项目,并且希望将这些资源合理组织、编译、压缩以及按需加载时,Webpack 就会派上用场。

在实际应用场景中,Webpack 主要出现在以下几个环节:

1. 项目初始化阶段在新建一个前端项目时,常常会使用像 Vue CLI 或 Create React App 这样的脚手架工具,它们内置了 Webpack 来处理项目构建。

2. 开发过程中:Webpack 提供本地开发服务器,实时监测源码变化并自动重新编译和刷新浏览器,这一功能极大提高了开发效率。

3. 项目构建阶段:在准备上线部署时,会通过运行 Webpack 打包命令来生成最终的生产环境代码,这个过程会包括资源压缩、代码优化、模块分割(懒加载)等操作,确保网站加载速度快且资源占用小。

4. 模块化开发:Webpack 对 ES6 模块、CommonJS、AMD 等模块规范提供了良好的支持,使得开发人员可以采用模块化的方式编写代码,然后由 Webpack 负责将模块之间的依赖关系解析并打包成单一或分块的 JS 文件。

简单来说,Webpack 简单来说就是个“大管家”,它帮你把开发网页时用到的各种文件(比如JavaScript、CSS、图片等)按照需求,有序且高效地合并、转换并打包成浏览器能直接运行的几个小包。这样,你的网页就能更快地加载和运行,而且开发过程也更方便、更有条理。它就像是一个智能的整理箱,把散乱的零部件组装成精简高效的成品。


http://www.ppmy.cn/embedded/1903.html

相关文章

【服务器部署篇】Linux下Jenkins安装和配置

作者介绍:本人笔名姑苏老陈,从事JAVA开发工作十多年了,带过刚毕业的实习生,也带过技术团队。最近有个朋友的表弟,马上要大学毕业了,想从事JAVA开发工作,但不知道从何处入手。于是,产…

生信分析Linux教程-GTF文件处理

P18 GTF文件处理01 P19 GTF文件处理02 生物信息中Linux命令练习 1 统计GTF文件中染色体数目? 2 统计GTF文件中基因数目? 3 计算GTF中外显子总长度? 4 计算GTF文件中基因所拥有的平均转录本数目

标题:探索算法世界的奇妙与力量

标题:探索算法世界的奇妙与力量 在当今信息时代,算法已经成为了我们生活中不可或缺的一部分。从搜索引擎、社交媒体,到无人驾驶、机器人,算法都在其中发挥着重要的作用。本文将为您详细介绍算法的概念、类型、应用场景以及算法的…

EasyUI Jquery 学习笔记 ——DataGrid(数据网格)与 Tree(树)详细版

1. DataGrid(数据网格)与 Tree(树) 1.1 Datagrid 数据网格 扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。 数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目…

【python+Excel】读取和存储测试数据完成接口自动化测试

http_request2.py用于发起http请求 #读取多条测试用例 #1、导入requests模块 import requests #从 class_12_19.do_excel1导入read_data函数 from do_excel2 import read_data from do_excel2 import write_data from do_excel2 import count_case #定义http请求函数COOKIENon…

TCP机械臂测试

#include<myhead.h> #define SER_IP "192.168.125.242" #define SER_PORT 1234 #define CLI_IP "192.168.243.131" #define CLI_PORT 9999 int main(int argc, const char *argv[]) { //1、创建用于通信的套接字文件描述符 int cfd socket(…

【多线程】单例模式 | 饿汉模式 | 懒汉模式 | 指令重排序问题

文章目录 单例模式一、单例模式1.饿汉模式2.懒汉模式&#xff08;单线程&#xff09;3.懒汉模式&#xff08;多线程&#xff09;改进 4.指令重排序1.概念2.question:3.解决方法4总结&#xff1a; 单例模式 一、单例模式 单例&#xff0c;就是单个实例 在有些场景中&#xff0c…

2024年华中杯B题论文发布+数据预处理问题一代码免费分享

【腾讯文档】2024年华中杯B题资料汇总 https://docs.qq.com/doc/DSExMdnNsamxCVUJt 行车轨迹估计交通信号灯周期问题 摘要 在城市化迅速发展的今天&#xff0c;交通管理和优化已成为关键的城市运营问题之一。本文将基于题目给出的数据&#xff0c;对行车轨迹估计交通信号灯…