javascript - 不了解用 vue-cli 创建的 Vue 项目的项目结构
问题描述
我是 Vue.js 的新手,之前从未使用过前端框架。
我使用“vue create”命令创建了一个项目,其中包含常用插件和所有内容(没有改变游戏规则),一切正常。我想从 0 开始,所以我删除了 public 目录中的 index.html 文件、src 目录中的 main.js 文件和配置文件(见下文)。
现在,当我加载页面时,您可以在瞬间看到“Test”和“{{message}}”,然后它就消失了,页面完全空白。
所以我的问题是,main.js 文件是如何连接到 index.html 文件的。我从 webpack 知道你需要一个入口点并从那里链接所有内容,但我在这里找不到这样的东西,因为 main.js 不包含 index.html。那么为什么我的代码没有按预期工作呢?我想让它说 Hello World。
索引.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!'
}
})
解决方案
你在哪里看到这条线
<!-- built files will be auto injected -->
是 webpack 将在其中注入加载捆绑 javascript 的脚本标签的地方,您应该能够在使用 devtools 时看到这一点。这是你的主要入口块被加载的地方。但是,只有当 webpack 实际通过运行开发服务器或创建生产包来完成其工作时,才会发生这种情况。
如果“当我加载页面时”是指在浏览器中打开index.html
文件,这不会有太大作用。您将需要运行 webpack,在较新版本的 vue cli 中,您可以通过导航到根文件夹并运行来执行此操作vue-cli-service serve