vue2 项目构建 （上）

项目结构Config

1. dev.env.js

开发环境配置：

'use strict'
// 合并配置
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  CONF_ENV: `"${process.env.CONF_ENV}"`,
  NODE_ENV: '"development"',
  // 接口地址
  API_HOST: {
    workreport: '"/api_workreport"',
    file: '"http://pps.banggood.cn:8083"',
    wx_gateway: '"http://pps.banggood.cn:8099"'
  }
})

2. prod.env.js

生产环境配置：

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
  }
}

项目Src

这里想先介绍一下项目所涉及到的一些工具utils：

1. apiFetch.js

这里的apifetch是基于axios封装的一套接口调用插件

import axios from 'axios'

export default function apiFetcher (config) {
  const service = axios.create({
    timeout: 20000,
    withCredentials: true,
    ...config
  })

// 暴露出来一些方法，以及需要的参数
export function getReportTemplate ({beginDate, endDate, reportDateType, reportType} = {}) {
  return apiFetch({
    url: '/report/template/getReportTemplate',
    method: 'post',
    data: {
      eqBeginDate: beginDate,
      eqEndDate: endDate,
      eqReportDateType: reportDateType,
      eqReportType: reportType
    }
  })
}

/* 然后从不同文件路径import {getReportTemplate} 使用*/
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

时间选择与格式化时间功能，思路是先做成年，转化成周，然后周赋值到月，定位当前周

/**
 * 获取整年的星期四
 * @param year 传入如  2017
 * @returns {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

上传与下载文件功能, 返回值false无法操作

// 控制文件的大小--单位 MB
  const fileSize = file.size / 1024 / 1024

  if (fileSize > 100) {
    Vue.$vux.toast.show({
      type: 'cancel',
      text: '文件大小不能超过 100MB ！'
    })
    return false
  }

// 控制上传文件的格式
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'
  ]

入口文件 main.js

初始化vue实例并使用需要的插件。
注：这里store,IconSvg引用是用的‘@/…’

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(() => {})

主组件 app.vue

所有页面，路由，组件都是在App.vue下进行切换的

<template>
  <div id="app">
    <!-- 以解决其带来的 z-index 失效问题。--> 
    <div v-transfer-dom>
      <loading :show="appLoading"></loading>
    </div>
    <!-- 在路由外层包keep-alive用来缓存组件,避免多次加载[search-list],减少性能消耗 -->
    <keep-alive :include="['search-list']">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  import { ViewBox, Tabbar, TabbarItem, Loading, TransferDom } from 'vux'
  // 手机端点击
  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>