时间戳

首页 > 解决方案 > 这两个非常基本的 vue 应用程序有什么区别？

vue.js - 这两个非常基本的 vue 应用程序有什么区别？

问题描述

我一直在学习 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 的代码沙箱中，没有渲染任何内容，根元素的内容会闪烁然后从 dom 中消失。无论我在主 div 中放入什么，它都会在应用安装后立即被删除。https://codesandbox.io/s/m5qvm40nkx

标签： vue.js

解决方案

我认为这个问题与 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

推荐阅读