1.通过脚手架工具生成项目后的入口文件
只有Angular是通过模块化来管理组件的，Vue与React都是直接加载组件
- 在入口html中定义根节点
- 在入口js中将组件加载到根节点（Angular是加载模块）
- Angular会通过过组件的selector属性, 与根节点名称进行匹配加载
| ~ | html | js | module |
|---|---|---|---|
| Angular | src/index.html | src/main.ts | app.module.ts |
| Vue | index.html | src/main.ts | NA |
| React | public/index.html | src/App.js | NA |
2.组件代码分离情况
angular分离的最彻底，html/js/css各自写在独立的文件中
vue其次，虽然写在同一个vue文件中，但是各个区域都相对独立
react最差，html代码写在jsx的react的render方法中
css都可以定义独立文件，以下整理的是考虑限制css作用范围时常用做法
| ~ | html | js | CSS |
|---|---|---|---|
| Angular | .html文件 | .ts文件 | .css文件 |
| Vue | .vue文件 | .vue文件 | .vue文件 |
| React | .tsx文件 | .tsx文件 | .css文件 |
3.组件属性校验
| ~ | 校验方法 |
|---|---|
| Angular | 通过setter方法来进行验证：@Input() set name(value: string) {throw new Error('Name is required');} |
| Vue | 在组件的 props 选项中使用验证函数： propXXX: {type: [String, Number], required: true}, |
| React | 使用PropTypes来进行验证：static propTypes = {title: PropTypes.string.isRequired,} |
在 Vue 3.x 中，如果你使用 TypeScript，可以利用 TypeScript 的类型系统来进行更强大的 prop 验证。这不仅可以避免 JavaScript 的运行时错误，还可以在编译阶段捕获类型错误。
props: {
propF: {
type: String as PropType<'success' | 'warning' | 'danger'>,
validator: (value: string) => ['success', 'warning', 'danger'].includes(value),
},
},
4.父子传值
父传子：
| ~ | 父 | 子 |
|---|---|---|
| Angular | <app-child [parentData]="dataToChild"> | 使用@Input()：@Input() propName |
| Vue | <ChildComponent :parentData="parentValue" /> | 使用props：props: ['parentData'] |
| React | return <ChildComponent data={dataToPass} />; | 使用props：return <div>{props.data}</div>; |
子传父
| ~ | 父 | 子 |
|---|---|---|
| Angular | <app-child (dataSent)="recFromChild($event)"> | emit：@Output() dataSent = new EventEmitter<string>(); |
| Vue | <Child @child-event="recFromChild" /> | emit： this.$emit('child-event', '这是从子组件传递的值'); |
| React | handleChild = (childData) => {} <Child onData={handleChild} /> |
回调函数：props.onData(dataToSend); |
5.axios代理配置
| ~ | 在项目的根目录下创建配置文件 |
|---|---|
| Angular | proxy.conf.json |
| Vue | vue.config.js |
| React | setupProxy.js |
具体配置内容参考：00009.axios代理配置 - 简书
整理中......
