Vue搭建移动新闻类页面

目录

前言

一、使用到的API和组件

二、页面描述

        1.页面展示

        2.安装vant UI     

        3.引入聚合数据

三、代码片段       

         3.1 App.vue

3.2 router/index.js

3.3 axiosServer/config.js && index.js

3.4 页面静态数据

3.5 Pages/index.vue

3.6 Pages/toutiao.vue

3.7 Pages/xingzuo.vue

     

四. 总结

---

前言

        作为一个大学崭新出厂的程序员，对编程的世界还比较迷茫，写下本文记录自己搭建的第一个Vue页面

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用到的API和组件

       

        因为刚上大学，没有资金，只能使用一些有免费次数的API，这里使用的是聚合数据。使用了vant UI组件库

二、页面描述

        1.页面展示

                              

               

 

                                         

        2.安装vant UI     

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

        3.引入聚合数据

                （聚合官网查找）

---

三、代码片段        

        

3.1 App.vue

        使用了Vue Router，axios，原本想用scss写样式，但是不经常用，怕以后再回顾不方便，所以用了css，用路由器写还是非常方便的   

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin: 0 auto;
} */
</style>

3.2 router/index.js

        这是路由的一些简单的配置，（就算是页面数量展示了吧，反正就三个Pages）

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/pages/index'
import xingzuo from '@/pages/xingzuo'
import toutiao from '@/pages/toutiao'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    redirect: "/xingzuo",
    component: index,
    children: [{
        path: "/toutiao",
        component: toutiao
      },
      {
        path: "/xingzuo",
        component: xingzuo
      },

    ],
  }]
})

3.3 axiosServer/config.js && index.js

              axios学习是在网络上尚硅谷的录课视频学习的，学习的不是很全面

export default {
	baseURL:'/',
	header: {
		'Content-Type': 'application/json'
	},
	withCredentials: true,
	timeout: 5000
};



import axios from 'axios';
import config from './config.js';
const axiosService = axios.create(config);

axiosService.interceptors.request.use((config) => {
    // config.headers.Authorization= `Basic ${store.getters.name}:${getToken()}`;
    config.headers.AuthorizationToken= '123';
  return config;
}, (error) => {
  return Promise.reject(error);
});


export default axiosService;

3.4 页面静态数据

        有需要的可以在我GitHub上找到，地址会放在文章最后 

3.5 Pages/index.vue

                这里写的是页面底部的两个跳转，还是使用了路由（所以路由是真滴好用）

<template>
  <div class="box">
    <router-view></router-view>
    <div class="foot flex flex-align-center">
      <div class&