根据开源的 API 制作论坛项目

---

准备

1）创建项目
2）现在图中第三个进行按照

• 3）选择内容中的蓝色字内容安装，其中第二个项中的按空格进行选中
  
• 4）启动项目，当打开页面出现 About 则证明上面选项中没有出现错误
  
• 5）安装 element-ui
  
  6）借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
  
  7）在项目的 bable.config.js中项目中输红色框里面的内容

• 8)在项目的src 文件夹中创建 一个 plugins 文件夹，并且创建一个element.js
  
• 9）在项目的 AboutView.vue 中创建一个 <el-button>按钮并且重启项目
  
• 当出现 这个按钮的时候证明，以上步骤没有出现错误

• 10）删除 components ，views里面的文件内容
  
• 11）创建公共样式,style.less 并导入 到 main.js
  

做完以上步骤，那么我们的准备就完成了

1、功能的实现

1.1、 页面的样式

导航：

<template>
<!-- 导航栏 -->
  <header>
    <div class="inner">
      <!-- 存放logo -->
      <router-link to="/">
         <img src="../assets/img/logo.png" alt="" class="logo">
      </router-link>
      <!-- 导航栏右边 -->
      <div class="header-right">
        <router-link class="home-link" to="/">首页</router-link>
          <!-- <router-link class="home-link" to="/">未读消息<router-link> -->
        <router-link to="/">
           <el-button type="info" size="medium"  icon="el-icon-user-solid">登录</el-button>
        </router-link>
        <!-- <router-link class="home-link" to="/">退出<router-link> -->
      </div>
    </div>
  </header>
</template>

<script>
export default {
   };
</script>

<style lang='less'>
header {
   
  width: 100%;
  height: 50px;
  background-color: rgb(44, 51, 51);
  position: fixed;
  top: 0;
  width: 100%;
  // 固定导航
  .inner {
   
    width: 72.5%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    .logo {
   
      width: 140px;
      height: 60px;
      margin-top: 5px;
    }
    .el-button--info {
   
      background-color: rgb(90, 89, 83);
      border-color: rgb(90, 89, 83);
      padding: 7px 7px;
    }
    .home-link{
   
      color: #fff;
      margin-right: 10px;
    }
  }
}</style>

首页

<template>
  <div class="home">
    <div class="nav">
      <router-link to="/">全部</router-link>
      <router-link to="/">精华</router-link>
      <router-link to="/">分享</router-link>
      <router-link to="/">问答</router-link>
      <router-link to="/">招聘</router-link>
      <router-link to="/">客户端测试</router-link>
    </div>
  </div>
</template>

<script>
export default {
   

}
</script>

<style lang='less'>
.home {
   
  width: 72.5%;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  border-radius: 6px; // 圆角
  overflow: hidden;
  min-height: 80vh;
  .nav{
   
    background-color: rgb(190, 185, 185);
    padding: 10px;
    display: flex;
    align-items: center;
    a{
   
      margin-left: 10px;
      padding: 4px;
      color: rgba(66, 175, 72, 0.664);
      font-size: 14px;
      border-radius: 4px;
      background-color: rgb(190, 185, 185);
      font-weight: bolder;
    }
    a.activ{
   
      color: #fff;
      background-color: aqua;
    }
  }
}
</style>
</style>

router文件下的js，导首页

add.js

1.2、具体内容

1.2.1、结构画分

对于具体内容，我们可以分成两部分，一个是大的内容页，一个的具体的内容页

• 对项目导入 axios 从而回去开源的 API： npm i axios

1.2.2、获取内容

对 axios 获取的内容进行 封装

// axios 封装
import axios from 'axios'

const instance = axios.create({
   
  // 请求基地址
  baseURL: " https://cnodejs.org/api/v1",
  timeout: 2000 // 控制时间 2000 = 2s，
  // 请求头的配置
  // headers
})

// 请求拦截器
// 例：提示开会员
instance.interceptors.request.use((config) => {
   
  // 请求头配置 config
  // config.auth = 'token'
  return config
})

// 响应拦截器
instance.interceptors.response.use((res) => {
   
  return res.data
})

// vue 全局加上 $http
// 在组件中使用 this.$http 就相当于 instance 了
// Vue.prototype.$http = instance
export default instance

对请求进行 二次封装 方便以后的管理
其中用到的类型有

• tab 类别
• page 页数
• limit 条数 默认 为 40