当前位置: 首页 > news >正文

VUE四:Vue-cli

什么是Vue-cli

vue-cli是官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建 Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

什么是web pack

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle.
Webpack 是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过loader转换,任何形式的资源都可以当做模块,比如CommonsJS、AMD、ES6、css、JSON、CoffeeScript. LESS 等;
伴随着移动互联网的大潮,当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里,使用HTML5、CSS3、ES6等新的技术来开发丰富的功能,网页已经不仅仅是完成浏览器的基本需求;WebApp通常是一个SPA (单页面应用),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的JS代码,这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别,首先是前端基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。

模块化的演进

Script标签

在这里插入图片描述

CommonsJs

在这里插入图片描述
在这里插入图片描述

AMD

在这里插入图片描述
在这里插入图片描述

CMD

在这里插入图片描述

在这里插入图片描述

ES6

在这里插入图片描述

在这里插入图片描述

Vue-router路由

在这里插入图片描述

结语

创作不易,希望能对大家给予帮助

想要获取更多资源?

点击链接获取

http://www.lryc.cn/news/542812.html

相关文章:

  • 以下是自定义针对 Vite + TypeScript 项目的完整路径别名配置流程:
  • LangGraph系列教程:基于状态构建上下文感知的AI系统
  • 图像处理、数据挖掘、数据呈现
  • 利用python和gpt写一个conda环境可视化管理工具
  • sort_values、sort 和 sorted 的区别与用法详解
  • 银行系统功能架构设计元模型
  • rabbitmq 延时队列
  • idea + Docker + 阿里镜像服务打包部署
  • Vue 3 零基础入门:从计数器应用开始你的工程化之旅 - 深入理解 Vue 3 响应式系统
  • 批量将手机照片修改为一寸白底证件照的方法
  • 【Docker基础】理解 Docker:本质、性质、架构与核心组件
  • LeetCodehot 力扣热题100 全排列
  • SQL笔记#数据更新
  • GCC 和 G++的基本使用
  • Maven中一些基础知识点
  • 论文阅读笔记:Deep Face Recognition: A Survey
  • JVM生产环境问题定位与解决实战(三):揭秘Java飞行记录器(JFR)的强大功能
  • 爬虫框架与库
  • PyTorch常用函数总结(持续更新)
  • 代码异常(js中push)NO.4
  • Anaconda 2025 最新版安装与Python环境配置指南(附官方下载链接)
  • Vue 中动态实现进度条
  • CSS滚动条原理与自定义样式指南,CSS滚动条样式失效,滚动条样式无效,-webkit-scrollbar无效,overflow不显示滚动条
  • Three.js 入门(辅助、位移、父子关系、缩放旋转、响应式布局)
  • python算法-用递归打印数字3的幂--Day017
  • Selenium 与 Coze 集成
  • AWS CLI将读取器实例添加到Amazon Aurora集群
  • NTS库学习,找bug中......
  • 五十天精通硬件设计第40天-硬件测试流程
  • R语言安装教程(附安装包)R语言4.3.2版本安装教程