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

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.kler.cn/a/392215.html

相关文章:

  • 【MySQL】MySQL函数之JSON_EXTRACT
  • Flutter Getx状态管理
  • 十三、注解配置SpringMVC
  • 用vscode编写verilog时,如何有信号定义提示、信号定义跳转(go to definition)、模块跳转这些功能
  • 【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构
  • 【pytorch】常用强化学习算法实现(持续更新)
  • 文献解读-DNAscope: High accuracy small variant calling using machine learning
  • Vue实际应用之无限滚动、css之、混合宏和~
  • 密码学基础 -- RSA-PSS盐值长度大揭秘
  • 机器学习—模型评估
  • 【日常记录-Java】代码配置Logback
  • GitHub每日最火火火项目(11.13)
  • 重学 Android 自定义 View 系列:动手实现专属 TextView
  • Vue3 : Tailwindcss之margin样式类
  • PCL 点云拟合 基于角度约束的Ransac拟合直线
  • C++ 中的异常处理机制是怎样的?
  • 【AI大模型】大型语言模型LLM基础概览:技术原理、发展历程与未来展望
  • C#语言详解:从基础到进阶
  • 国标GB28181视频平台EasyCVR私有化部署视频平台对接监控录像机NVR时,录像机“资源不足”是什么原因?
  • 灰狼优化算法
  • 【WebRTC】视频发送链路中类的简单分析(下)
  • 【STM32】基于SPI协议读写SD,详解!
  • HarmonyOS NEXT应用元服务开发Intents Kit(意图框架服务)技能调用接入方案
  • OpenCV相机标定与3D重建(1)概述
  • AI驱动的个性化购物推荐系统
  • 如何将Photoshop切换为中文界面