【Vue3】从零开始编写项目
【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。
- 执行命令
npm run dev启动应用。
总结
从零开始创建一个最简单的 Vue3 项目需要编写三个文件：
index.html：通过命令创建项目后自动生成，无需修改，此文件只做了两件事，一是定义 Vue 根组件挂载的 DOM，二是引入应用入口文件main.ts；App.vue：定义 Vue 根组件，包括定义组件的结构、行为和样式；main.ts：应用入口文件，通过 Vue 提供的createApp方法创建应用，然后通过mount方法挂在到 DOM 上。