vue.js - 使用vue框架编写的网页显示空白
本文介绍了vue.js - 使用vue框架编写的网页显示空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
使用vue框架尝试着写了一个网页，结果打开空白。从github上找了一个打开也是空白，只有标签页显示正确。有没有大神提示一下，可能是因为什么原因呢？
目录结构如下：
主要代码如下：
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Home from './components/Home.vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
//import 'bootstrap/dist/css/bootstrap.css'
Vue.use(VueResource)
Vue.use(VueRouter)
const router = new VueRouter()
router.map({
'/Home': {
component:Home
}
})
router.redirect({
'*': '/Home'
})
router.start(App,'#app')
// src/APP.vue
<template>
<div id="wrapper">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#">
<i class="glyphicon glyphicon-time"></i>
计划表
</a>
<ul class="nav navbar-nav">
<li><a v-link="'/home'">首页</a></li>
<li><a v-link="'/time-entries'">计划列表</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<router-view></router-view>
</div>
</div>
</div>
</template>
// src/components/Home.vue
<template>
<div class="jumbotron">
<h1>任务追踪</h1>
<p>
<strong>
<a v-link="'/time-entries'">创建一个任务</a>
</strong>
</p>
</div>
</template>
//..index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计划</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div id="app">
<app></app>
</div>
<!-- built files will be auto injected -->
</body>
</html>
解决方案
先把你的代码贴出来看看吧，也看不到你的目录结构
这篇关于vue.js - 使用vue框架编写的网页显示空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
