前端Vue3之基础知识点碎片

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、图片等）按照需求，有序且高效地合并、转换并打包成浏览器能直接运行的几个小包。这样，你的网页就能更快地加载和运行，而且开发过程也更方便、更有条理。它就像是一个智能的整理箱，把散乱的零部件组装成精简高效的成品。

原文地址：https://blog.csdn.net/m0_59704905/article/details/137907177

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！