前置知识

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

了解什么是HTML: 超文本标记语言，用来写网页的基本结构，建议了解 HTML 5
了解什么是 CSS : 层叠样式表，用来让你的页面更加生动和好看，建议了解 CSS 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                   开发目录，编码工作基本都是在这个目录下进行

├── 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文件分三段式

<template> </template> 包含 HTML 页面模版

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> // 定义了一个 HelloWorld 标签，属性是 msg: String 在目前的Demo程序中，子组件components/HelloWorld.vue 会引用这个数据
</template>

<script> </script> 包含 js代码，以及引用其它vue组件

<script>
import HelloWorld from './components/HelloWorld.vue' // 引用 HelloWorld.vue 组件

export default {
  name: 'App',                   // 将当前文件命名为 App 
  components: {                  // 在 components 属性注册引入的组件 HelloWorld  
    HelloWorld
  }   
}
</script>

<style> </style> 包含css样式

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components/HelloWorld.vue 解读

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

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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>  // 定义HTML模版，{{ msg }} 是定义一个变量，放在 h1 标签中
</template>

<script>
export default {
  name: 'HelloWorld',  // 将当前文件命名为 HelloWord 
  props: {             // 通过props获取父组件传递过来的值  
    msg: String        // 应用数据的格式，最终会传递给 HTML模版中的 {{ msg }} 变量
  }
}
</script>

<style scoped>
...
</style>

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