Question

我一直在学习Vue.js，我试图让根实例不擦除我放入其中的html内容。我的想法是，我可以拥有一个普通的html页面，而Vue可以“监视”主包装器，如果它遇到了一个vue组件，它将由vue呈现。当我导入vue的CDN时，我设法做到了，但是不以某种方式使用vue cli。我不明白其中的区别。

我通过CDN制作了此Codepen，加载了vue.js，并且呈现时没有问题

 <div id="app">
   <h1>My Vue.js App</h1>
   <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
});

https://codepen.io/cvallee/pen/dLKVEP

但是在使用vue cli的codesandbox中，什么都没有渲染，根元素的内容闪烁，然后从dom中消失。无论我在主div中放入什么内容，应用安装后都会立即将其擦除。 https://codesandbox.io/s/m5qvm40nkx

Answer 1

我认为问题与CodeSandbox加载Vue应用并触发初始渲染的方式有关。如果您添加App.vue文件并将main.js文件更改为

import Vue from "vue";
import App from "./App.vue";

// Vue.config.productionTip = false;

new Vue({
  el: "#app",
  render: h => h(App)
});

和index.html

<!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" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>codesandbox</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

以这种方式为我工作。这是工作版本-https://codesandbox.io/s/84ox08k24j

这两个非常基本的vue应用之间有什么区别？

1 个答案: