效果图:
新闻列表 | 新闻详情 | 目录结构 |
---|---|---|
![]() | ![]() | ![]() |
注意点:
1.在index文件中,配置适应手机
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2.在assets下面写的通用的css
basic.scss
在main.js中引入
import ‘./assets/css/basic.scss’;
3.使用路由 vue-router
4.请求数据 vue-resource
介绍:
basic.scss全局通用的css,在main.js中引入
index.html是配置html的
main.js是配置文件
App.vue是入口文件
Home.vue是首页文件
News.vue是新闻文件
源代码:
basic.scss:
@charset "utf-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body {
font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
color: #555;
background-color: #F7F7F7;
}
em, i {
font-style: normal;
}
ul,li{
list-style-type: none;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--配置适应手机-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>vuedemo13</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
main.js:
import Vue from 'vue';
import App from './App.vue';
//引入公共的scss 注意:创建项目时候必须使用scss
import './assets/css/basic.scss';
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);
//引入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
//配置路由
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '*', redirect: './home' }
]
//实例化VueRouter
const router = new VueRouter({
routes //缩写 相当于routes: routes
})
//挂载路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<header class="header">
<!-- 路由跳转 -->
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
</header>
<hr>
<!-- 动态加载路由组件 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="scss">
.header {
height: 4.4rem;
background: skyblue;
color: #fff;
line-height: 4.4rem;
text-align: center;
a{
color: #fff;
padding: 0 2rem;
}
}
</style>
Home.vue:
<template>
<div id="home">
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: '这是一个Home组件!'
}
}
}
</script>
<style>
</style>
News.vue:
<template>
<div id="news">
<h2>{{msg}}</h2>
<ul class="list">
<li v-for="(item,key) in list">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
msg: '这是一个新闻组件!',
list: []
}
},
methods:{
requestData() {
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response) => {
//注意 用到this要注意this指向
this.list = response.body.result;
},(error) => {
console.log(error);
})
}
},
mounted() {
this.requestData();
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height: 3.4rem;
line-height: 3.4rem;
border-bottom: 1px solid #eee;
font-size: 1.6rem;
a{
color: #666;
}
}
}
</style>
Content.vue:
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default {
data() {
return {
msg: '数据',
list: []
}
},
mounted() {
// console.log(this.$route.params); /*获取动态数值传值*/
var aid = this.$route.params.aid;
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid) {
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
//请求数据
this.$http.get(api).then((response) => {
console.log(response);
this.list = response.body.result[0];
},(error) => {
console.log(error);
})
}
}
}
</script>
<style lang="scss">
#content{
line-height: 2;
img {
max-width: 100%;
}
}
</style>