Project Structure Config
1. dev.env.js
Development environment configuration:
'use strict'
// Consolidated Configuration
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
CONF_ENV: `"${process.env.CONF_ENV}"`,
NODE_ENV: '"development"',
// Interface Address
API_HOST: {
workreport: '"/api_workreport"',
file: '"http://pps.banggood.cn:8083"',
wx_gateway: '"http://pps.banggood.cn:8099"'
}
})
2. prod.env.js
Production environment configuration:
var config = {
CONF_ENV: `"${process.env.CONF_ENV}"`,
NODE_ENV: '"production"',
API_HOST: {
workreport: '"/"',
file: '"http://pps.banggood.cn:8083"',
wx_gateway: '"http://pps.banggood.cn:8099"'
}
}
if (process.env.CONF_ENV === 'deploy') {
config.API_HOST.workreport = '"https://m-workreport.banggood.cn"'
config.API_HOST.file = '"https://finder.banggood.cn"'
config.API_HOST.wx_gateway = '"https://wechat.banggood.cn"'
}
module.exports = config
3. index.js
'use strict'
const path = require('path')
var cookie = ''
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/workreport-front-mobile/index.html'),
assetsRoot: path.resolve(__dirname, '../dist/workreport-front-mobile'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api_workreport': {
target: 'http://m.workreport.pps.banggood.cn:8082',
changeOrigin: true,
pathRewrite: (path, req) => path.replace('/api_workreport', ''),
headers: {
cookie
}
}
},
cssSourceMap: false
}
}
Project Src
Here I would like to start by describing some of the tools utils involved in the project:
1. apiFetch.js
Here, apifetch is a set of interface call plugins encapsulated by axios
import axios from 'axios'
export default function apiFetcher (config) {
const service = axios.create({
timeout: 20000,
withCredentials: true,
...config
})
// Expose some methods and required parameters
export function getReportTemplate ({beginDate, endDate, reportDateType, reportType} = {}) {
return apiFetch({
url: '/report/template/getReportTemplate',
method: 'post',
data: {
eqBeginDate: beginDate,
eqEndDate: endDate,
eqReportDateType: reportDateType,
eqReportType: reportType
}
})
}
/* Then import {getReportTemplate} from a different file path*/
getReportTemplate({
reportDateType: this.reportDateType,
reportType: this.reportType
}).then(res => {
this.$vux.loading.hide()
}).catch((e) => {
console.error(e)
this.$vux.loading.hide()
})
2. datePicker.js
Time selection and time formatting function, the idea is to make a year, convert into a week, then assign week to month, locate the current week
/**
* Get Thursday of the Year
* @param year Incoming e.g. 2017
* @returns {Array} Thursday's Array
*/
function getOneYearDates (year) {
let allDate = []
let theDay = new Date(year, 0, 1)
let weekDay = theDay.getDay()
let goDay = new Date(theDay.getFullYear(), theDay.getMonth(), theDay.getDate() + CUT_OFF_DAY - weekDay - 7)
while (goDay.getFullYear() <= year) {
if (goDay.getFullYear() === year) {
allDate.push(goDay)
}
goDay = new Date(goDay.getFullYear(), goDay.getMonth(), goDay.getDate() + 7)
}
return allDate
}
3. fileUpAndDownUtils.js / reportChangeUtils.js
Upload and download file function, return value false cannot operate
// Control file size--in MB
const fileSize = file.size / 1024 / 1024
if (fileSize > 100) {
Vue.$vux.toast.show({
type: 'cancel',
text: 'File size cannot exceed 100 MB !'
})
return false
}
// Control the format of uploaded files
const fileExt = file.name.split('.').reverse()[0].toLowerCase().trim()
const allowFileExt = ['xls', 'xlsx', 'wps', 'ppt', 'pptx', 'doc', 'docx', 'et', 'dps',
'txt', 'pdf', 'html', 'htm', 'hlp', 'dll', 'vsdx', 'xmind', 'md', 'chm', 'zip', 'rar', 'jar',
'psd', 'png', 'pic', 'jpg', 'ico', 'gif', 'bmp', 'eps', 'jpeg'
]
Entry FileMain.js
Initialize the vue instance and use the required plug-ins.
Note: here store,IconSvg reference is used'@/...'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store'
import IconSvg from '@/components/icon-svg'
Vue.use(IconSvg)
Vue.config.productionTip = false
store.dispatch('appInit')
.then(() => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
})
.catch(() => {})
Main ComponentApp.vue
All pages, routes, components are in App.vue Switched under
<template>
<div id="app">
<!-- To solve the problem z-index Failure problem.-->
<div v-transfer-dom>
<loading :show="appLoading"></loading>
</div>
<!-- On Routing Outer Pack keep-alive Used to cache components,Avoid multiple loads[search-list],Reduce performance consumption -->
<keep-alive :include="['search-list']">
<router-view/>
</keep-alive>
</div>
</template>
<script>
import { ViewBox, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
// Mobile Click
import FastClick from 'fastclick'
export default {
name: 'app',
directives: {
TransferDom
},
components: {
ViewBox,
Tabbar,
TabbarItem,
Loading,
TransferDom
},
computed: {
appLoading () {
return this.$store.getters.appLoading
}
},
mounted () {
FastClick.attach(document.body)
}
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>