Vue编写App组件
上次我们没有将src文件夹里面的东西，这次，我们来看看src里面的东西
- 我们都知道index.html是入口文件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- 我们发现他引入了src里面的main.ts，所以我们看看这个文件里面是啥
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
第一行很简单了，就是引入一些样式，让它好看一些；
第二行就是创建一个App应用，每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：我们可以想象它是一个装下你所有操作的大盒子；
第三行这个App是什么呢？它是就是一个组件，是一个根组件，其他的所有组件都是它的子组件，也就是一颗大树的根；
第四行就是我们创建一个示例，然后引入了根组件，所以我这个整个样子应该已经弄好了，那么我的这个样子得用在什么地方呢？这里就是使用mount挂载到id为app得里面，这个id从上面的入口文件就能看到这个位置在哪
- 之后我们会看到我们src里面有一个APP.vue,刚刚说了，这个就是组件,组件的代码稍后你得自己写，所以这里不作赘述
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
- 之后我们看到一个components的文件夹，顾名思义，这个里面放的全部都是组件，但是他们都是子组件
- 最后一个assets文件夹里面都是放着一些logo或者css文件
删除src，自己动手编写
- 之后我们要创建main.ts,当然跟组件App.vue也是要的
- 创建完成之后，我们就要再main.ts里面写东西了，首先我们从vue里面引入createAPP,然后引入根组件
//引入createApp创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
- 下一步就得挂载了
//引入createApp创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
createApp(App).mount('#app')
- 那现在就要往根组件里面写东西了，这个里面该写什么东西呢？主要是三个东西，第一个就是template，这个里面主要都是一些HTML的代码，其次呢就是script，里面主要是JavaScript或者typescript代码，然后就是style了，主要就是一些样式
<template>
<div>
<h1 class="app">Hello Vue</h1>
</div>
</template>
<script>
export default {
name: 'App' //组件名
}
</script>
<style>
.app{
background-color: green;
font-weight: 500;
color: white;
box-shadow: 0 0 15px;
border-radius: 10px;
padding: 20px;
}
</style>
这个HTML和style的代码就不作赘述，这个script里面写的是什么呢？意思就是这个根组件会以默认导出的形式被暴露给外部；我们来启动一下
