114 lines
5.1 KiB
Markdown
114 lines
5.1 KiB
Markdown
## 前端脚手架介绍-信蜂互动
|
||
|
||
------
|
||
目录
|
||
```
|
||
├── 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方法后面会更新 |