1.浏览器查看手机模式页面
2.页面适配 index.html
<head>
<meta charset="utf-8">
<title>vuedemo02</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>3.新建样式文件并引用
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;
}
main.js
//引入公共的scss 注意：创建项目的时候必须用scss
import "./assets/css/basic.scss";4.项目新闻页面实现
App.vue
<template>
<div id="app">
<br>
<img class="img" src="https://m.baidu.com/static/index/plus/plus_logo.png"/>
<hr>
<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:"百度新闻"
}
},
}
</script>
<style lang="scss" scoped>//scoped使css局部的，只作用于本组件文件
.img{
max-width: 100%;
}
.header{
height:4.4rem;
background: #555555;
color: #fff;
font-size: 16px;
line-height: 4.4rem;
text-align: center;
a{
color:#fff ;
padding: 0.2rem;
}
}
</style>
News.vue（新闻列表页面）
<template>
<div>
<ul class="list">
<li v-for="(item ,key) in list">
<router-link :to="'/content/' + item.aid">{{item.title}}</router-link>
</li>
</ul>
<hr>
</div>
</template>
<script>
export default {
name: "News",
data(){
return{
msg:"News.vue是一个新闻组件",
list:["100","200","300"]
}
},
//jsonp请求的话，后台api接口需要支持jsonp
methods:{
resquestData(){
var api ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
this.$http.jsonp(api).then((response) => {
/* console.log(response);*/
this.list =response.body.result;
},function (err) {
console.log(err);
})
}
},
mounted(){
this.resquestData();
}
}
</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 {
name: "Content",
data(){
return{
msg:"Content.vue是一个首页组件",
list:[],
}
},
methods:{
requesData(aid){
//get请求如果跨域的话，后台php java要允许跨域
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];
},function (err) {
console.log(err);
})
}
},
mounted(){
/* console.log(this.$route.params);*/
var aid = this.$route.params.aid;
this.requesData(aid);
}
}
</script>
<style lang="scss" >
#content{
padding: 1rem;
line-height: 2rem;
img{
max-width: 100%;
}
}
</style>
运行效果
