照着Vue3官网文档的例子打的，为什么会出错？

作者站长头像
站长
· 阅读数 11

照着Vue3官网文档的例子打的，为什么会出错？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="count++">
            Count is: {{ count }}
        </button>
    </div>

    <script>
        import { createApp } from 'vue'
        createApp({
            data() {
                return {
                    count: 0
                }
            }
        }).mount('#app')
    </script>


</body>

</html>

照着Vue3官网文档的例子打的，为什么会出错？哪里出问题了吗

回复
1个回答
avatar
test
2024-07-13

因为官网例子的代码是基于现代化开发脚手架的，不是最终运行在浏览器里的代码；你的写法是早期 html 内嵌 JS 的，不兼容，所以运行不了。

建议：目前这个阶段去 SFC Playground，用线上 demo 环境来学习和摸索。将来准备做项目的时候，再学习本地搭建开发环境。

我之前在 B 站做了一个系列视频：Vue3 开发扫雷游戏，就介绍了这个过程，推荐你看一看。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容