淘先锋技术网

首页 1 2 3 4 5 6 7

【前端框架】总结：三大框架(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

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

 

二、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中进行修改

注意！

【问题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 '#<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帮助我们创建，在组件类当中使用构造函数形参的方式接收
  • 服务是单例模式

架构图：

创建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