不了解使用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