【Vue3】从零开始编写项目

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍如何从零开始编写 Vue3 项目，目的是弄清 Vue3 项目的基本组成及原理。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 清空 src 目录下所有文件。

3> 在 src 目录下创建 Vue 根组件 App.vue。

<!-- 组件结构 -->
<template>
    <div class="app">
        Hello, Vue3
    </div>
</template>

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

<!-- 组件样式 -->
<style>
.app {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
}
</style>

一个 Vue 组件包含三类一级标签：

• <template>：定义组件结构，类似于前端 HTML。
• <script>：定义组件行为，此处只暴露了组件名称 App。
• <style>：定义组件样式，即 CSS。

4> 在 src 目录下创建应用入口文件 main.ts，负责初始化 Vue 应用并将其挂载到 DOM 上。

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

// 创建应用并挂载到DOM（index.html）
createApp(App).mount('#app')

注意：Vue 根组件所挂载的DOM定义在 index.html 文件中。

index.html 只做了两件事：

• 定义 Vue 根组件挂载的 DOM（默认为 app）。
• 引入应用入口文件 main.ts。

5. 执行命令 npm run dev 启动应用。
   

总结

从零开始创建一个最简单的 Vue3 项目需要编写三个文件：

• index.html：通过命令创建项目后自动生成，无需修改，此文件只做了两件事，一是定义 Vue 根组件挂载的 DOM，二是引入应用入口文件 main.ts；
• App.vue：定义 Vue 根组件，包括定义组件的结构、行为和样式；
• main.ts：应用入口文件，通过 Vue 提供的 createApp 方法创建应用，然后通过 mount 方法挂载到 DOM 上。