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

---

目录

├── 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方法后面会更新