## 前端脚手架介绍-信蜂互动

------
目录
```
├── README.md                   //说明文档
├── babel.config.js             //babel 编译配置文件
├── bash                        //bash 文件目录 
│   └── autoUploadTest.sh
├── dist                        //发布目录 
│   ├── favicon.ico
│   ├── index.html
│   └── static                  // 发布静态资源目录，可在 vue.config.js 中更改
│       ├── css
│       ├── img
│       └── js
├── package.json                // 项目配置文件
├── postcss.config.js           // css 补全插件配置文件
├── public                      // 静态页面目录
│   ├── favicon.ico
│   ├── icon.jpg
│   ├── index.html
│   └── share.html
├── src                         // 开发主目录
│   ├── assets                  // 资源目录
│   │   ├── css                 // css目录
│   │   │   ├── global.less
│   │   │   └── reset.less
│   │   └── images              // 图片目录
│   │       ├── logo.png
│   │       └── share
│   ├── components              // 组件目录
│   │   └── welcome.vue
│   ├── page                    // 页面文件目录
│   │   ├── index
│   │   │   ├── App.vue
│   │   │   ├── Home
│   │   │   ├── main.js
│   │   │   └── router
│   │   └── share
│   │       ├── App.vue
│   │       ├── Home
│   │       ├── main.js
│   │       └── router
│   ├── preload                 // 预加载资源列表 目录
│   │   └── imgList.js
│   ├── store
│   │   └── index.js
│   └── utils                   // 工具集目录
│         ├── index.js
│         └── plugins
│             ├── create-loader.js
│             ├── plugin.js
│             ├── preloadjs-0.6.2.min.js
│             ├── qrcodejs.js
│             ├── soundjs-0.6.2.min.js
│             └── xglPlugins.min.js
├── vue.config.js               // vue-cli配置文件
└── webpack.plugins.js          // 自定义 webpack 工具集 废弃
```
---
### 一、启动
    执行npm install 安装项目依赖，然后执行下面步骤1或步骤2。
    1. 执行vue ui,面板任务中点击 dev任务启动 app。
    2. 执行npm run dev启动。

### 二、自动发布
    测试: vue ui面板中任务点击deploy:dev任务或执行 npm run deploy:dev 发布到测试服务器（需要在项目根目录 deploy.config.js 配置webDir参数发布目录）
    生产: 执行 npm run deploy:prod 需要输入 yes 确认 方可发布

### 三、vue-cli 针对项目配置以及其他配置
    项目根目录vue.config.js中：
    1.pages 是多页面配置项，可根据已有配置自行扩展，新增页面需要在 public 目录中新增对应的 html文件
    2. vConsolePlugin插件已在项目自动引入并且在生产环境自动放弃引入
    3. 项目已启用 gzip 压缩
    4. 项目已将global.less全局化，页面中只需在 style 内 引入 @import '~@/assets/css/global.less'; 即可实现自定义 less 方法使用（scss 需改造当前脚手架）

### 四、前端工具箱
    工具箱目录为 ./src/utils/index.js

    目前已加入的方法:
    btnTouched,     // 按钮点击响应动画
    showTips,        // 默认弹窗插件
    orientation,      // 横屏提示
    rebuildAjax,      // request 请求方法
    detectEnv,       // 环境检测
    checkFormalEnv, // 检查当前环境是否为正式
    getQueryString,   // url截取参数
    getSetCookie,     // 设置 cookie
    updateUrl,          // 更新 url
    addTrackEvent,   // 添加埋点
    getRandomElements, // 获取数组随机元素
    getJGJOpenIdAndToken,  // 获取金管家 openid 和 openToken 方法
    rangeRandom,    // 获取随机数方法
    randomSortArray, // 随机排序数组方法
    hexToDec,          // 字符转义
    decToHex,          // 字符反转义
    cutString,           // 截取字符串
    sleep,                // setTimeout es6写法
    loadMusic,         // H5背景乐方法
    jgjShare,            // 金管家 share 方法
    wxSdkInitialize,   // 微信环境初始化 wx jssdk
    wxShare,           // 微信分享重置
    handleTargetEnv, // 处理目标环境
    loadJs,              // 异步加载 js
    initial,               // 初始化工具集
    jgjReady,           // 金管家 js 异步加载完成回调
    preload,            // 预加载资源

    工具集已挂载至 Vue 对象下的$Utils，在页面和组件中直接调用即可。
    this.$Utils.btnTouched(event.target, () => {
        console.log('点击了按钮')
    })	
    具体方法的使用见 [xgl-api插件文档](http://192.168.1.250/front/utils/) preload 、rebuildAjax方法后面会更新