將組件加載到html容器中
三大框架都是spa，在html文件中寫出 root的<div>對象（通常叫做app或者root），然后將根組件渲染給root對象

比如html內(nèi)容：通過npm腳手架生成的項目，html的文件名字應(yīng)該如下

• Angular:src/index.html
• Vue:index.html
• React: public/index.html

  <div id="root"></div> <!-- 容器元素 -->

Angular

在Angular中，通過模塊文件注冊組件，根模塊文件通常是app.module.ts，你也可以自定義自己的模塊文件xxx.module.ts。
在模塊文件中導(dǎo)入組件或其他模塊，然后在@NgModule裝飾器的declarations數(shù)組中注冊組件，在import數(shù)組中注冊其他模塊：

將組件和路由注冊到模塊中：app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { YourComponentNameComponent } from './your-component-name/your-component-name.component';
 
@NgModule({
  declarations: [
    AppComponent,
    YourComponentNameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

加載根模塊：main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

根據(jù)路由顯示當前路徑對應(yīng)文件:src\app\app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeCustomComponent, canActivate: [AwagAuthVerifyToken] },
];

入口文件是在angular.json文件中指定的，這里不再繼續(xù)討論，實際開發(fā)中通常也是無需關(guān)注的。

2.Vue:

加載根組件和路由src/main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#root');

根據(jù)路由顯示當前路徑對應(yīng)文件:src\app\app-routing.module.ts

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export const constantRoutes = [
  {
    path: '',
    redirect: '/EnglishChinese',
  },
  {
    path: '/EnglishChinese',
    name: 'EnglishChinese',
    // component: Menu
    component: () => import('@/views/english_chinese/Main'),
    children: [
      {
        path: 'WordList',
        name: 'WordList',
        components: {
          default: () => import('../views/english_chinese/words/WordList'),
        },
      },
      {
        path: 'CountChart',
        name: 'CountChart',
        components: {
          default: () => import('../views/english_chinese/count/CountChart'),
        },
      },
    ],
  },
];
const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  mode: 'history',
});
const router = createRouter();

export default router;

3.React:src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '.App';
import reportWebVistals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);