vueday01——应用挂载

vueday01——应用挂载

1.一般我们会在main.ts魔板里面看到如下语段

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'createApp(App).use(store).use(router).mount('#app')

其中createApp 是一个根组件，其他组件都挂在在其上面。

createApp 还创建一个应用，将该实例挂载到id为app的vue文件上面，将其作为根容器

2.查看APP.vue

<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

可以看到这里并没有#app的id引用，但是出现了样式，所以这个页面其实会被渲染出一个id为app的标签作为程序入口，往下面继续渲染东西，形成一个树的结构，一边就在这里面定义路由导航或者初始页面