两周掌握Vue3（二）：Vue基本代码构成、Vue3指令详解

本博客配套源码仓库：跳转
当前分支：02

运行npm run serve确保项目是运行状态，然后就可以一边在IDE中修改代码，一边在浏览器中通过访问http://localhost:8080/查看实时变化。

一、Vue项目代码逻辑

我们先学习一下Vue-cli创建的脚手架项目的最重要的两个文件的代码关系，为后面修改代码建立一些必要的理解基础。

1.main.js解析

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

1. import { createApp } from 'vue'：这行代码使用ES6的模块语法，从Vue模块中导入createApp函数。在Vue 3中，createApp函数用于创建一个Vue应用实例。

2. import App from './App.vue'：这行代码导入了一个名为App的组件，它位于当前目录下的App.vue文件中。在Vue中，组件通常用于构建应用的界面和功能。

3. createApp(App).mount('#app')：这行代码使用createApp函数创建了一个Vue应用实例，并将其挂载到页面上的一个具有特定id的DOM元素上。这意味着Vue应用将会渲染到id为"app"的DOM元素中。

综合起来，这段代码的作用是使用Vue 3创建一个应用实例，并将其挂载到页面上的特定DOM元素上，以此来启动Vue应用。

2.App.vue解析

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Tracy's Blog"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<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>