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

  • 相关阅读:
    前端面试题之——兼容篇
    操作系统之进程
    Oracle 19c RAC installation on centos7.5
    【Python3】组合数据类型
    Puredev MemPro 1.6 C++ 内存分析器
    6 分钟看完 BGP 协议。
    广联达笔试题
    气动旋转接头如何使用
    css画十字架和靶心图标
    API接口文档1688阿里巴巴获取跨境属性数据
  • 原文地址:https://blog.csdn.net/m0_59704905/article/details/137907177