【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构

一、Vue

介绍:渐进式JavaScript框架
  • 渐进式框架:vue是一个生态,在核心功能的基础上,其他功能任意选用。
  • 核心:
    • 声明式渲染:基于HTML拓展了一套模版语法,可以声明式地描述处HTML和JavaScript状态之间的关系
    • 响应式:Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
    • 虚拟DOM:js用对象的方式模拟真实dom。每次更新先作用到虚拟dom,通过比较找出变化的地方,一次性渲染到真实dom上。
    • diff算法:作用在新旧虚拟dom做对比,更新到真实dom上的过程中
    • 双向数据绑定:通过监听器监听所有数据,数据变化后更新视图,视图变化后更新数据
    • MVVM
      • 数据层(Model):应用的数据及业务逻辑
      • 视图层(View):应用的展示效果,各类UI组件
      • 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来

vue2.6+vue-cli 创建项目

$ npm install -g @vue/cli
$ vue create edu-boss-fed
自定义选项:
[Vue 2] dart-sass, babel, typescript, router, vuex, eslint

$ cd edu-boss-fed
$ npm run serve

【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构_第1张图片

vue3+vite 创建项目

$ npm init vue@latest
	Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。
	Add TypeScript? 是否加入TypeScript组件?默认值:Yes。
	Add JSX Support? 是否加入JSX支持?默认值:No。
	Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:Yes。
	Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:Yes。
	Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。
	Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。
	Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:Yes。
	Add Prettier for code formatting?  Yes
$ cd boat-shop-admin
$ npm install
$ npm run lint
$ npm run dev

 【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构_第2张图片

二、React

介绍:react是一个声明式,高效灵活的用于构建用户界面的JavaScript库。只负责应用的视图层,帮助开发人员构建快速且交互式的web应用程序。

核心:

  • JSX语法
  • 单向数据流
  • 函数式编程
  • 组件开发模式
  • 虚拟DOM
  • 声明式编程
     

使用create-react-app创建最新版本react项目

$ npx create-react-app my-app
$ cd my-app
$ npm start

注意:
1. npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
2. 如需修改react,请在package.json中进行修改

【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构_第3张图片

注意!

【问题1】在降低react版本时,更改package.json文件,删除node_modules及package-lock.json后,重新npm i 可能会碰到版本冲突报错。如下图:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   typescript@"^4.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"4.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1" from [email protected]
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/qiruofan/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/qiruofan/.npm/_logs/2022-10-04T04_41_09_385Z-debug-0.log

解决方法:npm i --legacy-peer-deps 

--legacy-peer-deps标志告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装,保证各个引入的依赖之间对自身所使用的不同版本modules共存。

【问题2】npm run start遇到TypeError: Cannot assign to read only property 'jsx' of object '#'问题,解决方法:

npm install --dev [email protected]
rm tsconfig.json
npm run start

三、Angular

介绍:

  • Angular是一个使用HTML、CSS、TypeScript构建客户端应用的框架,用来构建单页面应用程序
  • Angular是一个重量级的框架,内部集成了大量开箱即用的功能模块
  • Angular为大型应用开发而设计,提供了干净切松耦合的代码组织方式,使用程序整洁更易于维护

模块:

  • Angular是由NgModule和ESModule共同组成
  • NgModule是一组相关功能的集合,ESModule是一个文件,NgModule包含ESModule
  • Angular应用中至少有一个NgModule(根模块),用于启动应用程序

组件:

  • 组成:组件类、组件模版、组件样式,可以分别写在三个文件中方
    • 组件类:编写和组件直接相关的界面逻辑,在组件类中要关联该组件的组件模板和组件样式
    • 组件模板:用来编写HTML结构,通过数据绑定标记将应用重的数据和DOM进行关联
    • 组件样式:编写组件的外观,可采用各种css预处理器
  • 组件必须基于功能模块下使用,一个组件只属于一个模块,如过其他模块使用,需要依赖当前模块,且当前模块需导出该组件

服务:

  • 用来放置组件之间的共享数据和逻辑,可以解藕组件类中的代码
  • 服务类的使用对象由angular帮助我们创建,在组件类当中使用构造函数形参的方式接收
  • 服务是单例模式

架构图:

【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构_第4张图片

创建angular应用

安装angular-cli
$ npm install @angular/cli -g

创建应用
$ ng new angular-test --minimal --inline-template false
	--inlineTemplate 行内模板 将组件模板单独拿出来
	--skipGit=true 忽略git 不初始化git仓库
	--minimal=true 最小化 创建精简的angular 不包含单元测试 lint
	--skip-install 不自动安装项目依赖
	--style=css	指定css预处理器
	--routing=false	是否创建路由文件
	--inlineTemplate true把模板文件和类合并 false分开
	--inlineStyle true把样式文件和类合并 false分开
	--prefix 更改文件前缀 默认app

启动:
$ ng serve --open
	--open=true 应用构建完成后在浏览器中运行
	--hmr=true 开启热更新
	hmrWarning=false 禁用热更新警告
	--port更改应用运行端口 默认4200

【前端框架】总结:三大框架(vue/react/angular)介绍及搭建基本项目结构_第5张图片

你可能感兴趣的:(vue.js,angular,react,vue.js,react.js,angular.js)