我是Vue.js的新手,以前从未使用过前端框架。
我使用“ vue create”命令创建了一个项目,其中包含通常的插件和所有内容(游戏没有任何变化),并且一切正常。 我想从0开始,所以我删除了公共目录中的index.html文件,src目录中的main.js文件和配置文件(参见下文)。
现在,当我加载页面时,您可以立即看到“测试”和“ {{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!'
}
})
答案 0 :(得分:1)
您在哪里看到线
<!-- built files will be auto injected -->
是webpack在其中注入脚本标签以加载捆绑的javascript的地方,当您使用devtools时,您应该能够看到。这是您的主条目块被加载的地方。但是,只有在webpack实际上是通过运行开发服务器或通过创建生产包来完成其工作时,这种情况才会发生。
如果“在我加载页面时”是指在浏览器中打开index.html
文件,则此操作无济于事。您将需要运行webpack,在新版本的vue cli中,您可以通过导航到根文件夹并运行vue-cli-service serve