我正在尝试学习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。
您的代码有几个问题。首先，您必须将JavaScript包装在文件的script标记中Products.vue。同样，在Products.vue文件上，您可以仅导出组件文件，而不是按照原来的方式进行创建，也没有Vue在Products.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密钥，一旦您对其进行测试，就会暂时将其删除。
| 归档时间： |
|
| 查看次数： |
7113 次 |
| 最近记录： |