当前位置：首页 > article >正文

尚硅谷Vue3入门到实战 —— 02 编写 App 组件

article 2025/1/4 13:28:56

根目录下的 index.html 是项目的入口文件，默认的具体内容如下：

src 文件夹分析

<!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>

入口文件中最重要的一行是 <script type="module" src="/src/main.ts"></script>，这里把 src 文件夹中的 main.ts 文件引入，src/main.ts 的内容如下：

import './assets/main.css'  // 引入 css 样式

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

import { createApp } from 'vue' ：把写应用比喻为种花，createApp 就是花盆，种花首先必须要有一个平台，createApp 就是类似这个功能（创建应用）；

import App from './App.vue' ：App.vue 是一个 .vue 文件（与 main.ts 在同一个目录下），所以 App 是一个组件，相当于种花的根，以后我们写的 A.vue、B.vue 等 vue 组件都需要安装在 App 这个根上，我们写的组件相当于这花上的枝叶或者花；

createApp(App).mount('#app') ：简单来说，就是把花插在花盆上，用标准的语言来描述，createApp(App) 是把 App 传递给 createApp，用于创建一个应用，这个应用里所有组件的根组件；mount('#app') 的意思是把花盆摆放在指定位置，这里是指把这个应用挂载到 id=app 的 div 容器中，这个容器在 index.html 中，也就是 index.html 中的 <div id="app"></div>；

src/components 是组件文件夹，种花的根是 App.vue，花的枝叶保存在 components 文件夹中；

src/assets 中存放的是 css 样式和 svg 数据；

从零构建 src 文件夹

删除项目中的src，然后在根目录下新建一个文件夹，命名为 src，然后执行下面两个步骤：

创建 main.ts 文件:

// 引入 createApp 用于创建应用
import {createApp} from 'vue';
// 引入 App 根组件
import App from './App.vue';

createApp(App).mount('#app');

创建 App.vue 文件

<template>
<div class="app">
    <h1>你好啊！</h1>
</div>
</template>

<script lang="ts">
    export default {
        name: 'App' // 组件名
    }
</script>

<style>
    .app{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>