Vue.js应用程序没有错误，但白页

Question

我正在尝试学习Vue。 我阅读了本教程，并尝试使用标准vue-cli Webpack模板将其拆分为单个文件组件。 我的控制台没有任何错误，但页面为白色，我无法理解原因。

这是我的main.js文件

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
window.axios = require('axios');

const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const ApiKey = "18e1540d187c4b46bae767782750f9fd";
const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world";

function buildUrl (url) {
  return NYTBaseUrl + url + ".json?api-key=" + ApiKey
}

const vm = new Vue({
  el: '#app',
  data: {
    results: [],
    sections: SECTIONS.split(', '), // create an array of the sections
    section: 'home', // set default section to 'home'
    loading: true,
    title: ''
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.loading = false;
        this.results = response.data.results;
        let title = this.section !== 'home' ? "Top stories in '"+ this.section + "' today" : "Top stories today";
        this.title = title + "(" + response.data.num_results+ ")";
      }).catch((error) => { console.log(error); });
    }
  }
});

这是App.vue文件

<template>
  <div id="app">
    <h1>Test</h1>
    <product-list></product-list>
  </div>
</template>

<script>
import Products from './components/Products'

export default {
  name: 'app',
  components: {
    Products
  }
}
</script>

<style lang="sass" >
  @import '~bulma/sass/utilities/initial-variables.sass'
  @import "~bulma/sass/utilities/_all"
  @import "~bulma/sass/base/_all"
  @import "~bulma/sass/grid/columns"
  @import "~bulma/sass/components/_all"
</style>

我还在components文件夹中创建了一个Products.vue文件

<template id="product-list">
  <section>
    <div class="row" v-for="posts in processedPosts">
      <div class="columns large-3 medium-6" v-for="post in posts">
        <div class="card">
        <div class="card-divider">
        {{ post.title }}
        </div>
        <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
        <div class="card-section">
          <p>{{ post.abstract }}</p>
        </div>
      </div>
      </div>
    </div>
  </section>

</template>

Vue.component('Products', {
  props: ['results'],
  template: "#product-list",
  computed: {
    processedPosts() {
      let posts = this.results;

      // Add image_url attribute
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === "superJumbo");
        post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
      });

      // Put Array into Chunks
      let i, j, chunkedArray = [],
        chunk = 4;
      for (i = 0, j = 0; i < posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i, i + chunk);
      }
      return chunkedArray;
    }
  }
});

一切对我来说都很好（除了window.axios = require('axios');我不明白为什么在原始教程中不存在），但是页面空白，而且我为调试添加的标签也不是存在于DOM中。

编辑

看起来代码未编译。

我的页面源代码是

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script>

</body>

**编辑2 **

我了解这个问题。 这是我的index.html。

Answer 1

您的代码有几个问题。 首先，您必须将JavaScript包装在Products.vue文件上的script标签中。 同样，在Products.vue文件上，您可以仅导出组件文件而不是按照原来的方式进行操作，也没有在Products.vue文件上导入Vue ，但您正在使用它Vue.component('Products', {}) 。 您应该以这种方式创建Products.vue文件

Products.vue

<template>
  <section>
    <div class="container" v-for="posts in processedPosts">
      <div class="columns" v-for="post in posts">
        <div class="column is-6 is-offset-3">
           <div class="card">
           <header class="card-header">
             <p class="card-header-title">
            {{ post.title }}
            </p>
           </header>
           <div class="card-image">
           <a :href="post.url" target="_blank">
             <figure class="image">
               <img :src="post.image_url">
             </figure>
           </a>
           </div>

        <div class="card-content">
          <div class="content">
            <p>{{ post.abstract }}</p>
          </div>
        </div>
      </div>
        </div>
      </div>
    </div>
  </section>

</template>
<script>
export default{
  props: ['results'],
  computed: {
    processedPosts() {
      let posts = this.results;
      // Add image_url attribute
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === "superJumbo");
        post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
      });

      // Put Array into Chunks
      let i, j, chunkedArray = [],
        chunk = 4;
      for (i = 0, j = 0; i < posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i, i + chunk);
      }
      return chunkedArray;
    }
  }  
}
</script>

在main.js文件上，您忘记安装<App />模板。

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

您还应该将网络请求的代码，组件移动到App.vue文件中。

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
window.axios = require('axios');

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

必须在您导入的Products的代码上使用我们要导入的组件，但要使用<product-list></product-list> 。

App.vue

<template>
  <div id="app">
    <products :results="results"></products>
  </div>
</template>

<script>
import Products from './components/Products'

const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const ApiKey = "18e1540d187c4b46bae767782750f9fd";
const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world";

function buildUrl (url) {
  return NYTBaseUrl + url + ".json?api-key=" + ApiKey
}

export default {
  name: 'app',
  data: function(){
    return {
    results: [],
    sections: SECTIONS.split(', '), // create an array of the sections
    section: 'home', // set default section to 'home'
    loading: true,
    title: ''
    }
  },
  components: {
    Products
  },
  mounted(){
    this.getPosts('home');
  },
  methods:{
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.loading = false;
        this.results = response.data.results;
        let title = this.section !== 'home' ? "Top stories in '"+ this.section + "' today" : "Top stories today";
        this.title = title + "(" + response.data.num_results+ ")";
      }).catch((error) => { console.log(error); });
    }    
  }
}
</script>

我对此进行了测试，并将代码上传到github https://github.com/azs06/vuejs-news ，您可以克隆它并进行检查。 此处已部署http://noisy-coach.surge.sh/

注意：我正在使用api密钥，一旦您对其进行测试，就会暂时将其删除。

Answer 2

下次调试代码时-首先，您应该查看浏览器控制台中的错误。

您可以在这里看到本教程的完整代码-https: //github.com/sitepoint-editors/vuejs-news只要确保您编写的代码像在github文件上显示的那样即可。

Vue.js应用程序没有错误，但白页

问题描述

2 个解决方案

解决方案1
6 已采纳 2017-07-06 11:49:44

解决方案2
0 2017-07-06 07:30:11

Vue.js应用程序没有错误，但白页

问题描述

2 个解决方案

解决方案1 6 已采纳 2017-07-06 11:49:44

解决方案2 0 2017-07-06 07:30:11

解决方案1
6 已采纳 2017-07-06 11:49:44

解决方案2
0 2017-07-06 07:30:11