Vue.js学习（14）- vue.js项目实战：Http数据请求和路由实现新闻列表页面和新闻详情数据渲染

1.浏览器查看手机模式页面

 

2.页面适配 index.html

 

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

News.vue（新闻列表页面）

Content.vue（新闻详情页面）

运行效果