基础的内容都差不多了，开始研究文章详情页的内容设计，程序员嘛肯定要用markdown编辑了，找了一些发现这个md-editor看着还不错，文档介绍页比较清晰，用着也比较简单。
- md-editor安装配置使用
- Mock.js模拟请求接口
- mock.js 安装
- mock.js安装后搞个数据测试下
md-editor安装配置使用
安装这个编辑器到项目中
npm install md-editor-v3
之后在页面中引入
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
定义一个内容变量
const text = ref('Hello Editor!');
在模版中写上这个标签
<MdEditor v-model="text" />
之后就可以看到页面中显示出来这个编辑器了
更多细节功能可以看官网文档md-editor-v3
对于展示页面的话 就不需要这个编辑框了，只需要内容和目录，根据文档内容应该改成这个样子
import {MdPreview, MdCatalog} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
const state = reactive({
text: '',
id: 'my-editor',
});
const scrollElement = document.documentElement;
然后中把内容预览组件和目录的组件放上去
<template>
<MdPreview :modelValue="state.text" :id="state.id"/>
<MdCatalog :editorId="state.id" :scrollElement="scrollElement"/>
</template>
然后就是界面相关的样式内容自己调整吧，现在的页面应该就可以正常显示文章内容咯
但是现在还没有做后端的接口设计，所以怎么让前端也能模拟调用接口返回数据呢，这个时候就有一个叫做mock.js的东西了。
Mock.js模拟请求接口
页面设计完了，但是没有后端，没有数据接口怎么办，那就模拟一下吧，这个mock.js就是通过拦截axios的请求，然后模拟出来数据返回给前端调用。好处就是不用同时管后端开发，先设计前端页面和所需字段后，开发后端的时候更好的设计每个接口和数据表。
mock.js 安装
# 安装
npm install mockjs
创建一个mock的文件夹，里面创建一个index.js文件来放置mock的模拟接口和数据内容
我们先写一个测试数据就像下面这样
import Mock from 'mockjs';
Mock.mock('/test', 'get', {
message: 'Mock.js 加载成功！',
data: Mock.mock({
'items|5': [{ id: '@id', name: '@name', age: '@integer(20,50)' }],
}),
});
然后在main.js中把这个mock数据导入进去才可以正常使用。
main.js中加上这个
import('./mock')
如果之后仅在开发模式加载的话再加个开发环境判断导入，我这暂时没用，毕竟不是多磨复杂的项目，现在的配置还是不好用的因为之前axios请求的时候，做了一个vite.config.js的代理配置，这个代理配置会导致mock不能有效拦截请求，所以这个部分需要注释掉，等到什么时候后端调用接口的时候再恢复回来。
mock.js安装后搞个数据测试下
之后在页面中请求这个test，就会得到相应的模拟数据了。
然后我们现在做的是文章详情页，那么就需要设计一下文章详情需要返回的相应的内容和结构了。
首先定义一下请求的路径和返回的内容大概就这样
然后页面进行请求
然后就可以了
具体其他高级玩法就等着之后碰到啥再查啥就完事，因为也不需要模拟数据，只要能给我拦截请求做出我想要的格式，方便之后切换后端接口，怎么方便怎么来。
