vue-insagent-pc

zgdd-ui(文档示例)

一、环境及版本说明

1. vue 版本 2.5.2
2. element-ui 版本 2.14.1
3. node版本12.22.5

二、开发相关环境及配置

2.1项目资料

2.1.1接口地址

正式接口地址前缀：http://www.baoxianzhanggui.com:8080

测试接口地址前缀:http://test.baoxianzhanggui.com:8080

2.1.2文档地址

测试接口文档: swagger-ui

正式接口文档: swagger-ui

需求文档:[暂无]()

设计文档:[暂无]()

2.2项目配置

2.2.1安装node环境

2.2.2项目安装依赖

方法一：

npm install

方法二： 直接将找管理员索要依赖包，直接覆盖本地依赖

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

npm run dev

2.2.4 Compiles and minifies for production

npm run build

三、项目部署

3.1.1设置线上接口地址

弃用： 项目根目录下src/config/global.js下第12行，代码如下所示

export const baseUrl = ''

目前用： 项目根目录下config/dev.env.js为本地环境 项目根目录下config/prod.env.js为线上环境 部署测试环境：把接口地址修改为 http://test.baoxianzhanggui.com:8080
部署正式环境：把接口地址修改为 http://www.baoxianzhanggui.com:8080

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

npm run build
测试：npm run build--test 项目根目录下config/test.env.js
正式：npm run build--prod 项目根目录下config/prod.env.js

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

测试服务器项目目录：C:\soft\apache-tomcat-8.0.50\nginx-1.17.7\html 正式服务器项目目录：

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

4.1插件说明

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

4.2代码结构说明

├── config                              	 
│   ├── dev.env.js                     		
│   ├── index.js               				 
│   └── prod.env.js                         
├── dist                                    // 发布打包后静态文件目录
├── node_modules                            // node模块依赖安装目录
├── src                                  	// 项目静态文件目录
│   ├── assets                         		// 项目需要的公共的css，js，图片，字体图标以及中英文切换
│   ├── components                          // 项目所使用的第三方组件
│   ├── config                              // config下的global.js为全局常量、方法封装模块
│   ├── http                                // 接口请求配置
│   │  ├── moudules                         // 项目接口模块
│   │  ├── api.js                           // 接口调用配置
│   │  ├── axios.js                         // 请求拦截与处理
│   │  ├── config.js                        // 请求参数配置
│   │  └── index.js                         // 导入所有接口并挂载在$api上
│   ├── i18n                                // 注册i18n实例并引入语言文件
│   ├── mock                                // 模拟数据
│   ├── permission                          // 判断用户是否拥有操作权限
│   ├── router                              // 路由配置
│   ├── store                               
│   ├── utils                               
│   ├── views                               // 页面目录
│   │  └── Core                             // 组件文件
│   ├── App.vue                             // 项目入口文件
│   └── main.js                           	// 项目核心文件
├── static                                                
├── gitignore                               // 忽略编译生成的中间文件
├── package.json                            // 项目描述文件
├── package-lock.json                       // 模块与模块之间的依赖关系文件
├── manifest.json                           // uni-app项目类型及环境配置
├── pages.json                           	// 项目路由及项目界面配置
└── README.md                               // 项目说明文档