VUE3 学习笔记（五）——页面启动逻辑分析

合集 - Vue3知识(12)
1.VUE3 学习笔记（一）——Vue3介绍2.VUE3 学习笔记（二）——开发环境安装与部署项目3.VUE3 学习笔记（三）——Nodejs版本升级、降级与版本共存4.VUE3 学习笔记（四）——目录介绍
5.VUE3 学习笔记（五）——页面启动逻辑分析
6.Vue3 学习笔记（六）——Vue应用的使用7.Vue3 学习笔记（七）——模板8.Vue3 学习笔记（八）——Vue语法9.Vue3 学习笔记（九）——Vue组件的使用10.Vue3 学习笔记（十）——生命周期11.Vue3 学习笔记（十一）——倾听器watch12.Vue3 学习笔记（十二）——插件Plugins
收起

一、启动顺序：

  【index.html+main.js+main.css】->【App.vue】->【HelloWorld.vue、TheWelcome.vue】

   

1、【index.html+main.js+main.css】

  ① 使用div设置Vue应用空间<body><div id="app"></div></body>；

  

  ② 引用Vue方法import { createApp } from 'vue'；

  ③ 创建Vue应用实例挂载到id为app的html标签；即createApp(App).mount('#app')，后：<div id="app"></div>；

  

2、【App.vue】

  ① 引用组件空间import HelloWorld from './components/HelloWorld.vue'；

  ② 使用组件元素<HelloWorld msg="You did it!" />、<TheWelcome />；

  

二、注：当然也可以直接使用index.html作为根组件（容器；App.vue），如下：

  index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
        <button @click="count++">{{ count }}</button>
    </div>
    <!--<script type="module" src="/src/main.js"></script>-->
  </body>
    
  <script>
    import { createApp } from 'vue'

    const app = createApp({
      data() {
        return {
          count: 0
        }
      }
    })

    app.mount('#app')
  </script>
</html>

下一章：Vue3 学习笔记（六）——Vue应用的使用

posted @   ꧁执笔小白꧂  阅读(403)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
历史上的今天：
2021-02-27 C#-stopwatch记录运行时间
2021-02-27 get post最好使用post
点击右上角即可分享
微信分享提示