前置知识
准备开始使用 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 开发目录，编码工作基本都是在这个目录下进行
- 其中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>
到此为止，浏览器最终看到页面来自这里：
image
components/HelloWorld.vue 组件，通过 props 获取 App.vue (父组件)传递过来的值 <HelloWorld msg="Welcome to Your Vue.js App"/>，传递给自身 HTML模版中的 {{ msg }} 变量,
这里补充说明下：
- props是子组件访问父组件数据的唯一接口， 数据流是单向绑定的
- 父组件的属性变化时，将传导给子组件，但是反过来不会
- 每次父组件更新时，子组件的所有 prop 都会更新为最新值
