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

文章目录

• 准备
• 1、功能的实现
• • 1.1、 页面的样式
  • 1.2、具体内容
  • • 1.2.1、结构画分
    • 1.2.2、获取内容
    • 1.2.3、对内容进行展示
    • • 1.2.3.1、对时间进行展示
      • 1.2.3.2、对文章类型进行分类
      • 1.2.3.2、分类展示内容
      • 1.2.3.3、点击文章标题，展示内容
      • 1.2.3.4、样式的优化
      • 1.2.3.5、点击头像进入用户详情页
      • 1.2.3.6、用户的登录
      • 1.2.3.7、用户的退出
      • 1.2.3.8、文章的收藏
      • 1.2.3.8、对文章评论的点赞
      • 1.2.3.9、对文章进行评论
      • 1.2.3.10、实现文章的发布
      • 1.2.3.11、展示未读消息
      • 1.2.3.12、改变消息状态
      • 1.2.3.13、制作分页器展示内容
• 2、将项目打包发布到网上
• 3、代码

---

准备

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

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

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

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

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

1、功能的实现

1.1、 页面的样式

导航：

首页

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