02 Vue3 从读懂第一个页面代码开始

前置知识

准备开始使用 Vue3开发，需要具备一定的基础知识

1. 了解什么是HTML: 超文本标记语言，用来写网页的基本结构，建议了解 HTML 5
2. 了解什么是 CSS : 层叠样式表，用来让你的页面更加生动和好看，建议了解 CSS 3
3. 了解什么是JavaScript : 简称"JS",解释性或即时编译型的高级编程语言，建议了解 JavaScript ES6 规范

Vue3项目目录结构

使用vue-cli 执行命令 vue create demo-project 会生成一个项目模版目录，默认目录结构和说明如下：

README.md             默认的说明文件，主要是描述 npm 命令的参考使用 
babel.config.js       babel的配置文件
node_modules          插件安装包的内容
package-lock.json     
package.json          npm包配置文件，主要包含一些启动脚本和依赖关系
public                项目基础的html文件等
src                   开发目录，编码工作基本都是在这个目录下进行

4. 其中src目录说明如下：

├── App.vue              # vue主文件
├── assets               # 静态文件目录
│   └── logo.png       
├── components           # 自定义组件 
│   └── HelloWorld.vue   
└── main.js              # js主文件 

代码调用关系

第一个Web应用 http://127.0.0.1:8080 页面的对应的Vue 代码调用关系如下：

main.js -> App.vue -> components/HelloWorld.vue

main.js 解读

import { createApp } from 'vue'    // 引入 createApp 方法
import App from './App.vue'        // 引入 App.vue 文件 

createApp(App).mount('#app')       // 实例化 App 将渲染后内容挂在到id为app的标签下

在执行 npm run serve 浏览器访问: http://127.0.0.1:8080 看到第一个vue页面，以Chrome浏览器为例点击 更多工具 -> 开发者工具，可以看到createApp(App).mount('#app') App.vue文件渲染后，输出为包含 id=app div标签的Html页面。

image

App.vue 解读

App.vue 是整个项目的主体框架，这个页面上的内容会存在整个项目的每个页面，提供基础的样式，vue文件分三段式

1. 包含 HTML 页面模版

2. 包含 js代码，以及引用其它vue组件

3. 包含css样式

components/HelloWorld.vue 解读

简化 标签下默认的内容，把关键点提取出来解读如下, 按照调用关系描述如下：

1. App.vue 是根组件，也是components/HelloWorld.vue的 父组件
2. components/HelloWorld.vue 是子组件

到此为止，浏览器最终看到页面来自这里：

image

components/HelloWorld.vue 组件，通过 props 获取 App.vue (父组件)传递过来的值 ，传递给自身 HTML模版中的 {{ msg }} 变量,

这里补充说明下：

1. props是子组件访问父组件数据的唯一接口， 数据流是单向绑定的
2. 父组件的属性变化时，将传导给子组件，但是反过来不会
3. 每次父组件更新时，子组件的所有 prop 都会更新为最新值

参考

1. https://vue3js.cn/global/createApp.html
2. new Vue() vs createApp() https://www.bilibili.com/read/cv10133036/
3. https://gitee.com/wear-crown/seckill-system-front
4. ES6 特性简介 https://www.cnblogs.com/burningmyself/p/7451393.html