[vue3入门]HTML Learn Data Day 7
<p>学习真的是一件很累的事情，更何况有这么多杂七杂八的事情<br>唉唉，莎了我吧</p>
<p>原文章地址：https://www.cnblogs.com/Reisentyan/p/19656869</p>
<h2 id="vue3-构建">Vue3 构建</h2>
<p>Vue3 每一次构建新项目时，都会从 npm 上拉取模板。<br>
在 VS Code 中按：</p>
<pre><code>CTRL + ~
</code></pre>
<p>打开终端，然后输入：</p>
<pre><code>npm create vite@latest vue -- --template vue-ts
</code></pre>
<p>解释一下这条命令：</p>
<ul>
<li><code>create vite@latest</code>：使用最新版本的 Vite 创建项目</li>
<li><code>vue</code>：项目文件夹名</li>
<li><code>--template vue-ts</code>：使用 Vue + TypeScript 模板</li>
</ul>
<p>中途会问：</p>
<ul>
<li>是否使用实验性功能 → 选择 <code>NO</code></li>
<li>是否下载并运行 → 选择 <code>YES</code></li>
</ul>
<p>然后它会自动在当前文件夹生成一个完整的 Vue3 项目。<br>
每次启动项目，都在项目根目录输入命令：<code>npm run dev</code> 启动本地开发服务器</p>
<h2 id="项目入口结构">项目入口结构</h2>
<p>生成后，项目默认打开的是 <code>index.html</code>。<br>
里面有一行关键代码：</p>
<pre><code><script type="module" src="/src/main.ts"></script>
</code></pre>
<p>这句话非常重要。<br>
意思是：</p>
<blockquote>
<p>浏览器加载 main.ts 作为整个应用的入口模块。</p>
</blockquote>
<p>也就是说：<br>
真正的程序逻辑从 <code>main.ts</code> 开始。</p>
<h2 id="关于一些基础知识">关于一些基础知识</h2>
<p>在main.ts中我们会看到一些代码，我将代码及注释放到这里：</p>
<pre><code class="language-ts">import { createApp } from 'vue'
// 从 vue 模块中拿出 createApp 这个命名导出
import './style.css'
// 引入全局样式
import App from './App.vue'
// 从 App.vue 中拿出默认导出的组件
createApp(App).mount('#app')
// 创建一个 Vue 应用实例
// 并把它挂载到 index.html 里的 #app 上
</code></pre>
<p>也就是说，从 app.vue 中拿东西出来，插到 index.html 中的<code>#app</code>这个组件上面</p>
<p>从app.vue中我们会看到三段代码：</p>
<pre><code class="language-vue"><script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>
</code></pre>
<ul>
<li><code><script setup></code>：逻辑</li>
<li><code><template></code>：结构（HTML）</li>
<li><code><style scoped></code>：样式</li>
</ul>
<p>在 Vue3 中使用 <code><script setup></code> 是推荐写法，它是 Composition API 的语法糖。<br>
<code><style></code>加上 <code>scoped</code> 后，这里的样式只对当前组件生效，不会跑到外面去乱窜（防止样式污染）。</p>
<p>样例：</p>
<pre><code class="language-vue"><script setup lang="ts">
defineOptions({ name: 'App' });
</script>
<template>
<div class="title">
<h1>这是一个标题</h1>
</div>
</template>
<style scoped>
.title {
background-color: pink;
box-shadow: 0 0 10px;
padding: 20px;
border-radius: 10px;
}
</style>
</code></pre>
<p>一个 <code>.vue</code> 文件在编译后，本质上会变成一个 JS 模块，模块对外输出一个值——通常就是“组件对象”。<br>
也就是说，做网站就像拼积木一样，每一个 Vue 文件都是一块积木<br>
最后拼好之后，Vue 会把整棵组件树插入到 HTML 里的那个 <code>#app</code> 容器里。</p>
<p>以下是一段简单的代码，在网页中显示了一块信息页</p>
<img src="https://img.reisentyan.cn/i/2026/03/01/10kim3j.png" style="zoom: 33%">
<h2 id="一份简单的样例">一份简单的样例</h2>
<p>这是我的部分文件树：</p>
<pre><code>D:
index.html
src
│App.vue
│main.ts
│style.css
│
├─assets
│ vue.svg
│
└─components
IsMe.vue
</code></pre>
<p>我将 IsMe.vue 拼图插入到 App.vue 中，</p>
<h3 id="ismevue">IsMe.vue:</h3>
<pre><code class="language-vue"><script setup lang="ts">
defineOptions({ name: 'personPage' });
</script>
<template>
<div class="background">
<h1>This Is My Homepage</h1>
<div class="inf">这就是信息页</div>
</div>
</template>
<style scoped>
.background {
background-color: pink;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
.background h1 {
text-align: left;
}
.inf {
box-shadow: 0 0 5px;
color: purple;
font-size: 50px;
border-radius: 20px;
}
</style>
</code></pre>
<h3 id="appvue">App.vue</h3>
<pre><code class="language-vue"><script setup lang="ts">
import PersonPage from './components/IsMe.vue';
</script>
<template>
<PersonPage /> <!--在这里插入IsMe.vue组件-->
</template>
<style scoped></style>
</code></pre>
<ul>
<li><code>import</code> 是把组件模块引入</li>
<li><code><PersonPage /></code> 是使用组件</li>
<li>在 <code><script setup></code> 中 import 后可以直接使用，不需要额外注册</li>
</ul>
<h3 id="indexhtml">index.html</h3>
<pre><code class="language-html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue</title>
</head>
<body>
<div id="app"></div> <!--在这里插入App.vue组件-->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</code></pre>
<p>这里的 <code>#app</code> 只是一个挂载容器。<br>
真正的页面结构全部来自 Vue。</p>
<h2 id="总结">总结</h2>
<p>Vue3 的工作流程就是：</p>
<ol>
<li><strong>写小积木</strong>（Components）。</li>
<li><strong>在大积木里组装小积木</strong>（App.vue）。</li>
<li><strong>通过 <code>main.ts</code> 把大积木挂到 <code>index.html</code>。</strong></li>
</ol>
<p>像这样拼积木，一份项目就拼出来了</p><br><br>
来源：https://www.cnblogs.com/Reisentyan/p/19656869
頁:
[1]