Question

我试图学习Vue。我读了这个tutorial，我试图使用标准的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>

我还在组件文件夹

中创建了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包装在script文件的Products.vue标记中。同样在Products.vue文件上，你可以导出组件文件而不是创建你的方式，你也没有在Vue文件上导入Products.vue但是你正在使用它{{1 }}。您应该以这种方式创建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

我对此进行了测试，并将代码上传到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 个答案: