背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍如何从零开始编写 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 上。