尚硅谷Vue3入门到实战 —— 02 编写 App 组件
根目录下的 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>
在终端运行 npm run dev，打开浏览器，可以看到：
参考视频：尚硅谷Vue3入门到实战
原文地址：https://blog.csdn.net/qq_37388085/article/details/144795941
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！