0
私はVueを習得しようとしています。 私はこれを読んでtutorialと私は標準的なvue - cli webpackテンプレートを使用して単一のファイルコンポーネントでそれを分割しようとしています。私はコンソールに何のエラーもありませんが、ページは白で、私は理由を理解できません。Vue.jsアプリにエラーはありませんが白いページ
これは私の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には存在しません。コードがコンパイルされていないよう
編集
が見えます。
マイページのソースコードを編集2 **
私は問題を理解**
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script>
</body>
です。これは私のindex.htmlです。
あなたは空白のページであれば、ブラウザのコンソールをチェックしましたか？何かエラーがあります。あなたの 'Products.vue'ファイルにもjavascriptがスクリプトタグでラップされていない、エラーが発生する可能性があります。このように、すべてが機能しなくなります。 – azs06
@ azs06エラーはありません。より良い開発環境のためにVue Devtools拡張機能をダウンロードしてください：https://github.com/vuejs/vue-devtools。そしてサーバー "DONE Compiled successfully in 5015ms" –