# 移动前端脚手架

# 应用技术

# 技术栈

项目管理：npm
运行环境：Nodejs
项目框架：Vuejs
UI框架：Vant-UI
路由管理：Vue-Router
网络请求：Axios
全局状态：Vuex

# 框架

目录结构

├── dist                        // 打包后文件
├── node_modules                // 依赖包
├── public                      // html模板和静态文件
├── src                         // 源代码（模块应与apis里的js一一对应）
│   ├── apis                    // 后端接口
│   ├── assets                  // 静态资源
│   ├── components              // 全局公用组件
│   ├── layout                  // 布局
│   ├── mock                    // 模拟接口请求
│   ├── router                  // 路由
│   ├── store                   // 全局状态管理
│   ├── utils                   // 全局公用方法
│   ├── views                   // 前端页面代码
│   │   ├── demo                // demo模块
│   │   │   ├── table           // table页面
│   │   │   │   ├── components  // 页面组件
│   │   │   │   ├── Index.vue   // 页面入口
│   ├── App.vue                 // 入口页面
│   └── main.js                 // 入口 加载组件 初始化等
├── .env                	    // 默认配置文件
├── .env.dev                	// 开发环境配置文件
├── .env.test                	// 测试环境配置文件
├── .env.prod                	// 生产环境配置文件
└── package.json                // 依赖包管理

# 组件

中台封装了一些前端组件和方法，供开发者使用：

移动端 - 公用组件
移动端 - 公用方法
移动端 - 原生app封装

还提供了demo实例

移动端框架样例 (opens new window)

# 下载依赖

下载依赖：

npm install
或者
cnpm install
或者
yarn install

运行命令后会在项目的根目录生成node_modeles文件夹

# 基础属性配置

与网页端雷同，具体请参考网页端

# 登录接口配置

在src->store下的index.js中，配置ucLoginUrl参数，为开发者的认证接口。

VUE_APP_CONCRETE_PORT是在“环境配置”章节中说到的应用后端地址。

# 启动项目

运行项目
```
npm run serve
```
启动其它环境

以生产环境为例，在package.json中加上--mode prod如下图，则会默认调用.env.prod配置

# 模拟登录

启动项目成功后，手动在浏览器输入路由 /login，跳到模拟登录页面。（默认用模式二进行登录）

# 打包发布

与网页端雷同，具体请参考网页端

# 测试

注：如果是内部网络的话手机必须连接内网wifi（可用自己电脑开wifi连接，如没有权限请自行申请）

可以联系数字中台下载专属版进行测试，安装后打开，在左上角添加自己对应的环境即可

← PC前端脚手架后端 →