前端框架(混合开发框架)

前端框架

基于vue+vuex+vue-router+axios等框架整合的移动端框架.基于此框架可以实现android和ios的同时开发.

1. 前端采用hbuilder提供的mui框架,并整合了mint-ui+iview等第三方框架
2. app打包使用hbuilder提供的功能进行原生打包
3. 采用vue-router实现单页路由和路由之间的相互跳转
4. 使用.vue文件进行页面的编程开发
5. 使用webpack实现打包,压缩,混淆,预处理，热加载。

环境安装

• 下载hbuilder最新版本开发工具其实HBuilder是dcloud 把eclipse的改造成一个专门应用于app打包、多种语言支持：php、jsp、ruby、python、nodejs等web语言，less、coffee等编译型语言均支持的开发工具
• hbuilder 安装svn插件
  
  
• 下载node.js作为前端web的运行环境。我当前的node.js版本是8.11.1 npm版本5.6.0,安装完node后记得安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• app打包完全是基于manifest.json配置文件，它主要是用来配置app的基本信息（版本号、appid等）、图标(app的应用图标)、sdk配置、模块权限配置、页面引用关系、代码视图，具体参看dcloud提供的文档.
• 以总量APP作为框架演示,svn地址:https://192.168.106.21/svn/mobile/total/total

模块安装

#进入对应项目的目录
cd 对应目录
#安装依赖组件
cnpm install
# 启动服务
npm run dev
# 打包
npm run build

项目目录说明

|-- build                               // webapck打包后的文件目录
|-- src                                 // 源码目录
|   |-- components                      // 存放公共组件的目录
|       |-- comFooter.vue               // 底部组件
        |-- header.vue                  // 头部组件
|       |-- ...                         // 其他公共组件
    |-- config                          // webpack配置以及app的相关信息
|   |-- css                             // 存放各种css文件目录
|       |-- app.css                     // app的公用样式文件 
|       |-- mui.css                     // mui框架css
|       |-- ...                         // 其他css
|   |-- fonts                           // 存放各种fonts文件目录
|       |-- ...                         // 其他fonts文件
|   |-- image                           // 存放各种图片文件目录
|       |-- company                     // 按照业务存放图片
        |-- ...                         // 其他业务图片
|   |-- js                              // 存放各种js文件目录
        |-- 存放通用的js文件
|   |-- less                                // 存放各种less文件的目录
|   |-- page                                // 按模块和功能存放.vue页面文件
|           |-- guide                       // 引导页面
|           |-- app.vue                     // app页面入口文件
|           |-- login.vue                   //登录页面
|           |...                            //其他业务页面
|   |-- plugins                         // 第三方插件文件
    |-- router                          // 路由配置文件(按照模块区分)
    |-- service                         // api接口配置service层
    |-- store                           // vue状态管理器
|   |-- index.html                      // app的html模板页面
|-- unpackage                           // app编译包目录
|-- .gitignore                          // git忽略文件
|-- index.html                          // webapp的首页加载文件
|-- manifest.json                       // 打包app的配置文件
|-- package.json                        // 配置项目相关信息，通过执行 npm