不了解使用vue-cli创建的Vue项目的项目结构

Question

我是Vue.js的新手，以前从未使用过前端框架。

我使用“ vue create”命令创建了一个项目，该命令具有常用的插件和所有内容（游戏没有任何变化），并且一切正常。 我想从0开始，所以我删除了公共目录中的index.html文件，src目录中的main.js文件和配置文件（请参见下文）之外的所有内容。

现在，当我加载页面时，您可以立即看到“ Test”和“ {{message}}”，然后消失，使页面完全空白。

所以我的问题是，main.js文件如何连接到index.html文件。 我从webpack知道您需要一个入口点并从那里链接所有内容，但是我在这里找不到这样的东西，因为main.js不包含index.html。 那为什么我的代码不能按预期工作呢？ 我想说“世界你好”。

的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>Vue Getting Started</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but vue_getting_started doesn't work properly without
        JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app">
      <h1>Test</h1>
      <h1>{{ message }}</h1>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

Answer 1

您在哪里看到线

<!-- built files will be auto injected -->

webpack将在其中注入脚本标签以加载捆绑的javascript，在使用devtools时，您应该能够看到它。 这是您的主条目块被加载的地方。 但是，只有在webpack通过运行开发服务器或创建生产捆绑包实际完成其工作时，才会发生这种情况。

如果通过“当我加载页面时”是指在浏览器中打开index.html文件，则此操作无济于事。 您将需要运行webpack，在新版本的vue cli中，您可以通过导航到根文件夹并运行vue-cli-service serve来做到这一点。

不了解使用vue-cli创建的Vue项目的项目结构

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-22 15:23:35

不了解使用vue-cli创建的Vue项目的项目结构

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-22 15:23:35

解决方案1
1 已采纳 2019-08-22 15:23:35