Angular 和 Vue2.0 对比

前言 :“业精于勤,荒于嬉;行成于思,毁于随” 很久没写博客了,大多记录少进一步探查。

Angular 和 Vue2.0 对比:

一.概念

  • 1.1 Angular 框架:

是一款由谷歌开发的开源web前端框架(核心采用MVC模式),它基于TypeScript(同时支持JavaScript),常适用于中大型企业级项目;

  • 1.2 Vue2 框架:

‌是一个用于构建用户界面的渐进式JavaScript框架(核心采用MVVM模式),主要用于单页应用程序(SPA)开发。作者:由尤雨溪创建,于2016年发布。Vue 2的设计理念是让开发者可以更专注(简洁高效地构建)视图层;

二. 对比

2.1. 构建~项目

angular使用 angular cli 脚手架(例如:ng new project-name);
vue2使用 vue cli 脚手架脚手架(例如:vue create project-name);

2.2 项目 | 初始目录
2.2.1 Angular目录:

在这里插入图片描述

2.2.1 Vue2 目录:

在这里插入图片描述

针对上2点补充:

配置代理文件angular【proxy.conf.json】配置文件和vue 【vue.config.js】,是由手工去创建的,非默认生成文件,该类型的文件~主要作用就是配置开发环境中的代理服务器,解决跨域问题!(只能适用开发环境,生产环境使用使用ngxin代理或后端服务去解决)

2.3 图文概览

angular图
在这里插入图片描述

vue2 图
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/97abc3e7b53b46bf8ac72820d85c0584.png

最后补充:
  • angular执行npm安裝特别慢,容易报错( 2种方法:国内npm安裝慢,使用cnpm进行安裝依赖或设置代理使用淘宝镜像 )
  • angular中,创建组件,需要单独创建html、js、css文件和路由文件,可以看成angular的模块化、工程化一种形式,而ts的规范属性的类型声明、对象的声明这种严格模式,更好的遵从语义化标准,更好的代码的维护管理;
  • angular的项目体积大,一般运行时间长,反之vue项目体积小,启动速度快;
  • 项目入口文件,前者main.ts 后者man.js
  • 相比于angular组件的css、js、html分开写,vue可以在一个文件内可以同时写(单页面组件),前者文件分明、后者逻辑复杂代码冗长,臃肿
  • api提炼,angular中分为2部分:1 将其提炼到.model.ts里面变成一个类(声明类拥有的属性及对应的类型),2. 在server文件夹内定义具体接口方法;vue中对于接口,单纯定义封装具体业务的api.js,现比简洁;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60096.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 项目模型配置管理

Android 项目配置管理 项目模型相关的配置管理config.gradle文件:build.gradle文件: 参考地址 项目模型相关的配置管理 以下是一个完整的build.gradle和config.gradle示例: config.gradle文件: ext {// 模型相关配置&#xff0…

前端知识点---Javascript中检测数据类型函数总结

文章目录 01 typeof 运算符02 instanceof 运算符03 Array.isArray()04 Object.prototype.toString.call()05 constructor 属性06 isNaN() 和 Number.isNaN() (常用)07 isFinite() 和 Number.isFinite()08 typeof null 是 "object" 的问题 01 typeof 运算符 返回值是…

MAC 安装 brew及其常用命令

​文章:Mac安装brew的四种方法(指定能行) 以下是在 Mac 上使用 Homebrew 清理缓存和无用包的详细指南: 1. 查看系统状态 # 诊断系统问题 brew doctor# 查看已安装的包 brew list# 查看系统占用空间 brew cleanup -n # 预览需要…

基于Multisim数字电子秒表0-60S电路(含仿真和报告)

【全套资料.zip】数字电子秒表电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.秒表最大计时值为60秒; 2. 2位数码管显示,分辨率为1秒; 3.具有清零…

安卓智能指针sp、wp、RefBase浅析

目录 前言一、RefBase1.1 引用计数机制1.2 设计目的1.3 主要方法1.4 如何使用1.5 小结 二、sp和wp2.1 引用计数机制2.2 设计目的2.3 主要方法2.3.1 sp2.3.2 wp 2.4 如何使用2.5 小结 四、参考链接 前言 安卓底层binder中,为什么 IInterface要继承自RefBase &#x…

【论文笔记】Prefix-Tuning: Optimizing Continuous Prompts for Generation

🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: Prefix-Tuning: Optimizin…

【Web前端】从回调到现代Promise与Async/Await

异步编程是一种让程序能够在等待某些操作完成的同时继续执行其他任务的关键技术,打破了传统编程中顺序执行代码的束缚。这种编程范式允许开发者构建出能够即时响应用户操作、高效处理网络请求和资源加载的应用程序。通过异步编程,JavaScript 能够在执行耗…

如何自己实现事件的订阅和发布呢?

1.原理 核心思想是基于发布/订阅模式,用一个共享的数据结构来管理事件和事件监听器。主要功能包括事件订阅、取消订阅、发布事件等功能。 实现思路 定义事件和监听器接口:首先定义一个 Event 类和一个 EventListener 接口,所有事件和监听器…

【CSS】“flex: 1“有什么用?

flex 属性的组成 flex 属性是一个复合属性,包含以下三个子属性: flex-grow:决定元素在容器中剩余空间的分配比例。默认值为 0,表示元素不会扩展。当设置为正数时,元素会按照设定比例扩展。flex-shrink:决…

计算机课程管理:Spring Boot与工程认证的协同创新

3系统分析 3.1可行性分析 通过对本基于工程教育认证的计算机课程管理平台实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于工程教育认证的计算机课程管理平…

vuepress配置谷歌广告-通过vue-google-adsense库

在 VuePress 中可以使用 vue-google-adsense 插件来配置 Google AdSense 广告,这个库可以简化在 VuePress 项目中插入广告的过程。 以下是使用 vue-google-adsense 配置广告的步骤: 1. 安装 vue-google-adsense 库 在你的 VuePress 项目根目录下安装 …

深度学习:解码器如何与编码器交互的过程

解码器如何与编码器交互的过程 在序列到序列的神经网络模型中,解码器与编码器的交互是实现有效翻译、文本生成等任务的关键环节。这种交互主要是通过编码器-解码器注意力机制(通常称为跨注意力机制)来实现的,它允许解码器在生成每…

通过VirtualBox虚拟机安装和调试编译好的 ReactOS

1. 首先创建一个虚拟机配置脚本 setup_vm.bat: batch echo off :: setup_vm.bat :: 设置路径 set "REACTOS_BUILDE:\Reactos_WinDriver\reactos-master\build" set "VM_PATHE:\VMs\ReactOS_Debug" set "VBOX_MANAGEC:\Program Files\Ora…

Kubernetes-Kubectl篇-01-常用命令

kubectl 常见命令 登录命令 根据机器ip使用kubectl登录机器(field-selector): #!/bin/bash export targetIp"6.0.90.240"#alias kubectlkubectl alias kubectlkubectl --kubeconfig/Users/king/.kube/sa128.configpodinfokubectl get pod --all-namespaces --fiel…

【SpringBoot】18 上传文件到数据库(Thymeleaf + MySQL)

Git仓库 https://gitee.com/Lin_DH/system 介绍 使用 Thymeleaf 写的页面&#xff0c;将&#xff08;txt、jpg、png&#xff09;格式文件上传到 MySQL 数据库中。 依赖 pom.xml <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j --><depende…

Kubernetes实现故障转移和微服务弹性伸缩

以下是在Kubernetes&#xff08;k8s&#xff09;中实现故障转移和高可用的方法及详细操作步骤&#xff1a; 一、通过Kubernetes Deployment实现故障转移&#xff08;多实例部署&#xff09; 方法概述&#xff1a; 通过创建Deployment资源并设置多个副本&#xff0c;Kubernete…

Sharding运行模式、元数据、持久化详解

运行模式 单机模式 能够将数据源和规则等元数据信息持久化&#xff0c;但无法将元数据同步至多个Sharding实例&#xff0c;无法在集群环境中相互感知。 通过某一实例更新元数据之后&#xff0c;会导致其他实例由于获取不到最新的元数据而产生不一致的错误。 适用于工程师在本…

Go语言进阶之Context控制并发

Context Context是Go语言中一个用于传递请求范围的上下文信息的标准库包&#xff0c;其主要用于处理并发操作中请求的生命周期的管理。 协程如何退出 利用协程退出的例子来说明Context的作用&#xff0c;以及没有使用Context&#xff0c;应该如何在没有执行完代码时提前退出…

挖掘web程序中的OAuth漏洞:利用redirect_uri和state参数接管账户

本文探讨了攻击者如何利用OAuth漏洞&#xff0c;重点是滥用redirect_uri和state参数以接管用户账户。如果redirect_uri参数验证不严&#xff0c;可能会导致未经授权的重定向到恶意服务器&#xff0c;从而使攻击者能够捕获敏感信息。同样&#xff0c;state参数的错误实现可能使O…

数据中心类DataCenter(二)

数据中心类DataCenter&#xff08;二&#xff09; 前言 在上一集我们对数据中心类DataCenter做了以下内容&#xff0c;我们对他进行设置单例模式&#xff0c;我们讨论并写入了一些我们数据中心类需要管理的数据&#xff0c;重点介绍了我们验证码id的重要性&#xff0c;在最后…