不懂用vue-cli创建的vue项目的项目结构

Question

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

我使用 "vue create" 命令创建了一个项目，其中包含常用的插件和所有内容（没有改变游戏规则），并且一切正常。我想从0开始，所以我删除了除public目录中的index.html文件、src目录中的main.js文件和配置文件（见下文）之外的所有内容。

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

所以我的问题是，main.js 文件如何连接到 index.html 文件。我从 webpack 知道你需要一个入口点和 link 那里的一切，但我在这里找不到这样的东西，因为 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 通过运行开发服务器或创建生产包来实际完成其工作时才会发生这种情况。

如果 "when I load the page" 你的意思是在你的浏览器中打开 index.html 文件，这没什么用。您将需要运行 webpack，在较新版本的 vue cli 中，您可以通过导航到根文件夹并运行ning vue-cli-service serve

来做到这一点

不懂用vue-cli创建的vue项目的项目结构

Don't understand project structure of Vue project created with vue-cli

html

javascript

vue.js

vue-cli