我正试图从头开始创建一个vue.js应用。我正在尝试创建一个app.vue和一个app.js,但形成一些我收到此错误的原因。
vue.esm.js?efeb:578 [Vue警告]:找不到元素:#app
我一直想弄清楚我在2个小时内做错了什么,我似乎无法理解发生了什么。
import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import VueApollo from 'vue-apollo'
import Index from './Index.vue'
const httpLink = new HttpLink({
uri: 'http://localhost:4000/graphql',
})
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true,
})
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
el: '#app',
apolloProvider,
render: h => h(Index)
})
<template>
<div>
<h1>{{ msg }}</h1>
<h2>The following was loaded over Graphql:</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js & Phoenix & GraphQL App',
user: ""
}
},
}
</script>
defmodule StatcastersWeb.Router do
use StatcastersWeb, :router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_flash
plug :protect_from_forgery
plug :put_secure_browser_headers
end
pipeline :api do
plug :accepts, ["json"]
end
scope "/", StatcastersWeb do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
end
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello Statcasters!</title>
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
</head>
<body>
<div id=”app”></div>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>
我真的不知道我做错了什么以及为什么vue.js找不到元素。希望我已经发布了足够的信息,你们都可以帮助我。谢谢!