vue 处级为啥hello world这样不行？

问题描述：

最最简单的东西。。页面显示不了。

答

第九行至十八行代码，将其写在div后面，就是二十四行后面，11行的new vue 应该是new Vue

答

vue3.x版本的写法有改变，且你引入的cdn不对，完整代码示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{msg}}</div>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js"></script>
    <script>
      window.onload = function () {
        const App = {
          el: "#app",
          data() {
            return {
              msg: "hello",
            };
          },
        };
        Vue.createApp(App).mount("#app");
      };
    </script>
  </body>
</html>

答

应该是加载顺序问题，你把script 9-18放到25行，因为div id=itany还没渲染，vue el挂载也挂载不上。有报错吗控制台。vue3应该有些改变，和2不太一样

答

有window.onload，那么即使放在head也没关系

问题出在

1.cdn引用错误用的是cjs.js 这个文件是CommonJS规范直接使用会报ReferenceError: Can't find variable: exports 并且引用不进vue

2.如果用的是Vue3.x 那么你需要遵循vue3的规范文档[https://v3.cn.vuejs.org/guide/instance.html#创建一个应用实例]

所以可以通过更换2.x的cdn或者更换正确的3.x的cdn并改写创建实例的方式来解决

vue 处级 为啥hello world这样不行？

相关推荐

vue 处级为啥hello world这样不行？