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