说明
我正在为个人项目创建一个简单的新闻发布网站。在这个阶段，我一直在尝试通过使用VueResources来使用Http.get，但是我一直陷在这个我不理解的错误上。我想在不使用Vue CLI的情况下进行开发。
附加说明： index.html用于公用文件夹>>
vue.js <!DOCTYPE html>
<html lang="en">
**Error Code:**
app.js:1 Uncaught SyntaxError: Unexpected identifier
I have tried the following:
I searched through the internet and the results so far are to check for
import VueResource from 'vue-resource'
Vue.use(VueResource)
var app = new Vue({
el: '#form-id',
data: {
formStatus: false,
blog: [{
id: '',
title: '',
}
]
},
methods: {
},
mounted: function(){
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dexterous - Technology News Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand mb-0 h1">Dexterous</a>
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Highlights</a></li>
<li class="nav-item"><a class="nav-link" href="#">Categories</a></li>
</ul>
</nav>
<!--End of Navigation bar-->
<div class="container-fluid">
<div class="row">
<div class="col">
<!--Carousel Slides-->
<div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#dexterous-slides" data-slide-to="0" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="1" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
</div>
<a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End of Carousel Slides-->
</div>
</div>
<!--Action tools: Create a new post-->
<div id="form-id">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>Post Management</h5>
</div>
<div class="card-body">
<button v-on:click="formStatus = !formStatus" class="btn btn-light">➕ Add new Post</button>
<button v-on:click="" class="btn btn-light"> Manage Post</button>
</div>
</div>
</div>
</div>
<!--Form-->
<div class="row" v-if="formStatus">
<div class="col-md-12 mt-3">
<div class="card bg-light">
<div class="card-header">
<h3>Create a Post</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="blogTitle"><h5>Title:</h5></label>
<input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title...">
</div>
<div class="form-group">
<label for="blogContent"><h5>Content:</h5></label>
<textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."></textarea>
</div>
<button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2">Add Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Form end-->
<div class="row mt-3">
<div class="col-md-4">
<div class="card w-100" style="width:18rem;">
<div class="card-header"><h5>Year</h5></div>
<ul class="list-group list-group-flush">
<li class="list-group-item">2017</li>
<li class="list-group-item">2018</li>
<li class="list-group-item">2019</li>
</ul>
</div>
<div class="card w-100 mt-3" style="width:18rem;">
<div class="card-header"><h5>Posts</h5></div>
<ul class="ml-3 list-group list-group-flush">
<li class="list-group-item">Welcome to Dexterous</li>
<li class="list-group-item">New Javascript JS</li>
<li class="list-group-item">2019</li>
</ul>
</div>
</div>
<!--Content fields-->
<div class="col-md-8">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">Welcome to Dexterous</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
<a href="#" class="btn btn-dark">Read more</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-end mb-3 ">
<div class="col-md-8">
<div class="card bg-light">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">New Javascript JS</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
<a href="#" class="btn btn-dark">Read more</a>
</div>
</div>
</div>
</div>
</div>
<!--Functional scripts-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
唯一的问题是导入，所以我只将其注释掉并ba！其余代码将正常工作。
是否要修复它？
答案 0 :(得分：1)
VueResource时，它已经可以用作全局变量了：
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
这意味着您可以使用Vue.use(VueResource);，而不必像这样import VueResource from 'vue-resource'重新导入它。
在浏览器控制台中，使用以下命令检查其是否可用：typeof VueResource。如果它返回function，则可以正常运行。否则，它将返回一个undefined值。