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代理配置 - 简书

整理中......

00001.三大框架比较概览