接口文档示例

一、环境及版本说明

• vue 版本 2.6.10
• element-ui 版本 2.13.0
• node版本12.14.1

二、开发相关环境及配置

2.1项目资料

2.1.1接口地址

正式接口地址：https://

测试接口地址:https://

2.1.2文档地址

接口文档:http://

需求文档:

设计文档:

2.1.3 UI&UX地址

原型图地址:http:// [负责人:]

UI切图地址: [负责人:]

2.2项目配置

2.2.1安装node环境

2.2.2项目安装

npm install

2.2.3 项目编译&热加载【开发模式】（Compiles and hot-reloads for development）

npm run dev

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

三、项目部署

3.2.1安装node环境

3.2.2项目安装

npm install

3.2.3 设置线上接口地址

项目根目录下libs/http.js下第四行，代码如下所示

let base = ''

把测试接口地址 https:// 改成正式地址如 https://

3.2.4 项目编译最小静态文件【生产模式】（Compiles and minifies for production）

npm run build

3.2.5 压缩拷贝项目根目录下dist文件放到服务器项目根目录解压

四、代码及代码目录结构及代码文件功能说明

4.1插件说明

• 前端使用vue-cli构建项目
• 使用axios发送请求

4.2代码结构说明

• dist 发布打包后静态文件目录
• node_modules node模块安装目录
• public 公共目录
  • favicon.ico 网站头部左边图片;
  • Index.html webpack打包页面模板;
• Src 开发的目录
• assets 项目静态文件目录
  • del.png 新增编辑消息删除图标
• libs 接口调用目录
  • api.js 接口调用配置
  • http.js axios配置
• router 路由文件目录
  • index.js 路由配置
• views 页面目录
  • components 组件文件
    • addDialog.vue 消息新增编辑页面
    • sendNews.vue 发送消息页面
  • messageCenter.vue 首页表格页面
• app.vue 项目入口文件
• main.js 项目核心文件
• .gitignore 忽略编译生成的中间文件
• babel.config.js babel配置文件
• package-lock.json 模块与模块之间的依赖关系文件
• package.json 项目描述文件
• README.md 项目说明文档