merge:main

build/vue-loader.conf.js

@@ -9,6 +9,7 @@ const sourceMapEnabled = isProduction
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
+    usePostCSS:true,
     extract: isProduction
   }),
   cssSourceMap: sourceMapEnabled,

build/webpack.base.conf.js

@@ -51,6 +51,34 @@ module.exports = {
         options: vueLoaderConfig,
       },
       {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'less-loader'
+        ]
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      },
+      {
+        test: /\.pug$/,
+        loader: 'pug-plain-loader'
+      },
+      {
         test: /\.js$/,
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],

config/config.request.js

+module.exports = {
+    config: [{
+        project: '',
+        requestUrl: ''
+    }]
+}
\ No newline at end of file

config/test.env.js

+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

package.json

@@ -14,6 +14,8 @@
     "axios": "^0.18.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.9",
+    "moment": "^2.22.2",
+    "underscore": "^1.9.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
@@ -45,15 +47,22 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "moment": "^2.22.2",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.9.4",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.1.6",
     "postcss-url": "^7.2.1",
+    "pug": "^2.0.3",
+    "pug-filters": "^3.1.0",
+    "pug-loader": "^2.4.0",
+    "pug-plain-loader": "^1.0.0",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "stylus": "^0.54.5",
@@ -61,7 +70,7 @@
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",

src/App.vue

@@ -12,3 +12,7 @@ export default {
 
 <style>
 </style>
+
+<style lang="scss">
+@import "~@/assets/font-awesome/scss/font-awesome.scss";
+</style>

src/assets/font-awesome/scss/_animated.scss

+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

src/assets/font-awesome/scss/_bordered-pulled.scss

+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

src/assets/font-awesome/scss/_core.scss

+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}

src/assets/font-awesome/scss/_fixed-width.scss

+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

src/assets/font-awesome/scss/_larger.scss

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }

src/assets/font-awesome/scss/_list.scss

+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}

src/assets/font-awesome/scss/_mixins.scss

+// Mixins
+// --------------------------
+
+@mixin fa-icon() {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  -webkit-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

src/assets/font-awesome/scss/_path.scss

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

src/assets/font-awesome/scss/_rotated-flipped.scss

+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .#{$fa-css-prefix}-rotate-90,
+:root .#{$fa-css-prefix}-rotate-180,
+:root .#{$fa-css-prefix}-rotate-270,
+:root .#{$fa-css-prefix}-flip-horizontal,
+:root .#{$fa-css-prefix}-flip-vertical {
+  filter: none;
+}

src/assets/font-awesome/scss/_screen-reader.scss

+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only(); }
+.sr-only-focusable { @include sr-only-focusable(); }

src/assets/font-awesome/scss/_stacked.scss

+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

src/assets/font-awesome/scss/font-awesome.scss

+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

src/assets/styles/common.css

@@ -23,7 +23,7 @@
   color: #73879c;
   text-align: center;
 }
-.fr{
+.fr {
   float: right;
 }
 .step {

src/components/Sidebar/index.vue

-<template>
-  <div class="sidebar">
-    <el-row>
-      <el-col :span="7">
-        <div class="sidebar-left" v-for="(item,index) in sidebarList" :key="item.routes.path">
-          <el-button @click="handleClick(index)" type="primary" icon="el-icon-service">{{index}}</el-button>
-        </div>
-      </el-col>
-      <el-col :span="16">
-        <el-menu :collapse-transition="false" class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened :router="true">
-          <el-submenu :index="item.path" v-for="item in menus" :key="item.path">
-            <template slot="title">
-              <i class="el-icon-location"></i>
-              <span>{{item.title}}</span>
-            </template>
-            <el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path">{{subItem.title}}</el-menu-item>
-          </el-submenu>
-        </el-menu>
-      </el-col>
-    </el-row>
-  </div>
+<template lang='pug'>
+  .sidebar-wrapper
+    .sidebar
+      .logo
+        img(':src'="logo")
+      .item('v-for'="item in menuList" ,':key'="item.id",'@click'='choseMenu(item)')
+        sidebar-item&attributes({
+          ':icon':'item.ico',
+          ':link':'item.link',
+          ':type':'item.type',
+          ':id':'item.id',
+          ':name':'item.name',
+          ':pid':'item.pid',
+          ':grade':'item.grade',
+          ':sort':'item.sort'
+        })
 </template>
 <script>
+import sidebarItem from '../sidebarItem'
+const logo = require('@/assets/images/sidebar/logo-blue.png')
 export default {
   data () {
     return {
       collapse: false,
       currentRouteIndex: 0,
-      sidebarList: [
-        {
-          routes: [
-            {
-              path: 'home',
-              title: '首页'
+      logo,
+      menus: [],
+      menuList: []
     }
-          ]
   },
-        {
-          routes: [
-            {
-              path: 'home',
-              title: '精准营销',
-              children: [
-                {
-                  path: 'marketing',
-                  title: '营销推送'
+  components: {
+    sidebarItem
   },
-                {
-                  path: 'addmarketing',
-                  title: '推送详情'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      menus: []
-    }
-  },
-  computed: {
-    onRoutes (e) {
-      console.log(1)
-      return this.$route.path.replace('/', '')
-    }
+  mounted () {
+    new this.$Http(true).get('/getMenus').then(res => {
+      this.menuList = res.data.data
+    })
   },
+  computed: {},
   created () {
-    this.menus = this.sidebarList[this.currentRouteIndex].routes
   },
   methods: {
     handleClick (index) {
       this.currentRouteIndex = index
       this.menus = this.sidebarList[this.currentRouteIndex].routes
+    },
+    choseMenu (item) {
+      console.log(item)
     }
   }
 }
 </script>
 <style lang="stylus" scoped>
-.sidebar {
-  font-weight: lighter;
-  letter-spacing: 1px;
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-height: 720px;
-  width: 250px;
-  background-color: gray;
-}
-
-.sidebar-el-menu:not(.el-menu--collapse) {
-  width: 170px;
-}
+  .sidebar-wrapper
+    position relative
+    width 70px
+    height 100px
+    display inline-block
+  .sidebar
+    position fixed
+    left 0
+    top 0
+    bottom 0
+    width 70px
+    background #374a5e
+  .logo
+    text-overflow ellipsis
+    overflow hidden
+    font-weight 400
+    font-size 22px
+    width 100%
+    color #ECF0F1
+    line-height 59px
+    display block
+    height 65px
+    margin 10px auto
+    padding-left 5px
+    padding-top 5px
+    img
+      width 60px
+  .item
+    position relative
+    display block
+    cursor pointer
+    & + &
+      margin-bottom 6px
 </style>

src/components/sidebarItem/index.vue

+<template lang="pug">
+    .sidebar-item(@click='clickItem()')
+      i(class='fa',':class'="icon")
+      br
+      span {{name}}
+</template>
+<script>
+export default {
+  name: 'sidebarItem',
+  data () {
+    return {}
+  },
+  props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
+  methods: {
+    clickItem () {
+      console.log('click item')
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .sidebar-item
+    display block
+    color: #fff
+    text-align center
+    font-weight 400
+    font-size 10px
+    padding 10px 5px
+    i
+      margin-bottom 5px
+  .fa
+    font-size 25px
+</style>

src/config/index.js

+let env = process.env
+let api = `${env.host}`
+export default {
+  base: `${api}/${env.project}/${env.requestUrl}/`,
+  ...env
+}

src/main.js

@@ -9,11 +9,12 @@ import './assets/styles/common.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import Axios from 'axios'
 import * as filters from './filters'
+import { http } from './plugin'
 // 引入echarts
 import echarts from 'echarts'
 
 Vue.use(ElementUI)
-
+Vue.use(http)
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })

src/pages/marketing-center/components/TempList.vue

@@ -107,9 +107,7 @@ export default {
   },
   methods: {
     getDataList () {
-      this.axios
-        .get('/static/getStoreNoticeListByPageAction.json')
-        .then(res => {
+      this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
         if (res && res.data && res.data.data) {
           const { dataList } = res.data.data
           this.dataList = dataList

src/plugin/http/baseHttp.js

+import axios from 'axios'
+// import qs from 'qs'
+import store from '@/store'
+import config from '../../config/index'
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+  // Do something before request is sent
+  // console.log('======= config =======%o', config)
+  return config
+}, function (error) {
+  // Do something with request error
+  return Promise.reject(error)
+})
+
+// Add a response interceptor
+axios.interceptors.response.use(function (response) {
+  // Do something with response data
+
+  if (response.data.code === -1) {
+    return Promise.reject(response.data.message)
+  }
+  if (response.status >= 500) {
+    console.log(`========== response ======== %o`, response)
+  }
+  return response
+}, function (error) {
+  // Do something with response error
+  return Promise.reject(error)
+})
+
+const api = axios.create({
+  baseURL: config.base
+})
+
+const mockApi = axios.create({
+  baseURL: 'http://rap2api.taobao.org/app/mock/115626'
+})
+
+api.interceptors.request.use(function (config) {
+  store.dispatch('show_loading')
+  // Do something before request is sent
+  if (config.method === 'post') {
+    // config.data = qs.stringify(config.data)
+  }
+  return config
+}, function (error) {
+  // Do something with request error
+  return Promise.reject(error)
+})
+
+// Add a response interceptor
+api.interceptors.response.use(function (response) {
+  store.dispatch('hide_loading')
+  // Do something with response data
+  if (response.status >= 500) {
+    throw new Error('500!!!')
+  }
+  return response
+}, function (error) {
+  // Do something with response error
+  return Promise.reject(error)
+})
+
+// api.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
+
+class BaseHttpServer {
+  constructor (mock = false) {
+    if (mock) {
+      this.api = mockApi
+    } else {
+      this.api = api
+    }
+  }
+
+  get (url, params) {
+    return this.api.get(`${url}`, { params })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+
+  post (url, params) {
+    return this.api.post(`/${url}`, params)
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+}
+
+export {
+  axios,
+  api,
+  BaseHttpServer as Http
+}
+
+// {
+//   // `url` is the server URL that will be used for the request
+//   url: '/user',
+//
+//     // `method` is the request method to be used when making the request
+//     method: 'get', // default
+//
+//   // `baseURL` will be prepended to `url` unless `url` is absolute.
+//   // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
+//   // to methods of that instance.
+//   baseURL: 'https://some-domain.com/api/',
+//
+//   // `transformRequest` allows changes to the request data before it is sent to the server
+//   // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
+//   // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
+//   // FormData or Stream
+//   // You may modify the headers object.
+//   transformRequest: [function (data, headers) {
+//   // Do whatever you want to transform the data
+//
+//   return data;
+// }],
+//
+//   // `transformResponse` allows changes to the response data to be made before
+//   // it is passed to then/catch
+//   transformResponse: [function (data) {
+//   // Do whatever you want to transform the data
+//
+//   return data;
+// }],
+//
+//   // `headers` are custom headers to be sent
+//   headers: {'X-Requested-With': 'XMLHttpRequest'},
+//
+//   // `params` are the URL parameters to be sent with the request
+//   // Must be a plain object or a URLSearchParams object
+//   params: {
+//     ID: 12345
+//   },
+//
+//   // `paramsSerializer` is an optional function in charge of serializing `params`
+//   // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
+//   paramsSerializer: function(params) {
+//     return Qs.stringify(params, {arrayFormat: 'brackets'})
+//   },
+//
+//   // `data` is the data to be sent as the request body
+//   // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
+//   // When no `transformRequest` is set, must be of one of the following types:
+//   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
+//   // - Browser only: FormData, File, Blob
+//   // - Node only: Stream, Buffer
+//   data: {
+//     firstName: 'Fred'
+//   },
+//
+//   // `timeout` specifies the number of milliseconds before the request times out.
+//   // If the request takes longer than `timeout`, the request will be aborted.
+//   timeout: 1000,
+//
+//     // `withCredentials` indicates whether or not cross-site Access-Control requests
+//     // should be made using credentials
+//     withCredentials: false, // default
+//
+//   // `adapter` allows custom handling of requests which makes testing easier.
+//   // Return a promise and supply a valid response (see lib/adapters/README.md).
+//   adapter: function (config) {
+//   /* ... */
+// },
+//
+//   // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
+//   // This will set an `Authorization` header, overwriting any existing
+//   // `Authorization` custom headers you have set using `headers`.
+//   auth: {
+//     username: 'janedoe',
+//       password: 's00pers3cret'
+//   },
+//
+//   // `responseType` indicates the type of data that the server will respond with
+//   // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
+//   responseType: 'json', // default
+//
+//     // `responseEncoding` indicates encoding to use for decoding responses
+//     // Note: Ignored for `responseType` of 'stream' or client-side requests
+//     responseEncoding: 'utf8', // default
+//
+//   // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
+//   xsrfCookieName: 'XSRF-TOKEN', // default
+//
+//   // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
+//   xsrfHeaderName: 'X-XSRF-TOKEN', // default
+//
+//   // `onUploadProgress` allows handling of progress events for uploads
+//   onUploadProgress: function (progressEvent) {
+//   // Do whatever you want with the native progress event
+// },
+//
+//   // `onDownloadProgress` allows handling of progress events for downloads
+//   onDownloadProgress: function (progressEvent) {
+//     // Do whatever you want with the native progress event
+//   },
+//
+//   // `maxContentLength` defines the max size of the http response content in bytes allowed
+//   maxContentLength: 2000,
+//
+//     // `validateStatus` defines whether to resolve or reject the promise for a given
+//     // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
+//     // or `undefined`), the promise will be resolved; otherwise, the promise will be
+//     // rejected.
+//     validateStatus: function (status) {
+//   return status >= 200 && status < 300; // default
+// },
+//
+//   // `maxRedirects` defines the maximum number of redirects to follow in node.js.
+//   // If set to 0, no redirects will be followed.
+//   maxRedirects: 5, // default
+//
+//     // `socketPath` defines a UNIX Socket to be used in node.js.
+//     // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
+//     // Only either `socketPath` or `proxy` can be specified.
+//     // If both are specified, `socketPath` is used.
+//     socketPath: null, // default
+//
+//   // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
+//   // and https requests, respectively, in node.js. This allows options to be added like
+//   // `keepAlive` that are not enabled by default.
+//   httpAgent: new http.Agent({ keepAlive: true }),
+//   httpsAgent: new https.Agent({ keepAlive: true }),
+//
+//   // 'proxy' defines the hostname and port of the proxy server
+//   // Use `false` to disable proxies, ignoring environment variables.
+//   // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
+//   // supplies credentials.
+//   // This will set an `Proxy-Authorization` header, overwriting any existing
+//   // `Proxy-Authorization` custom headers you have set using `headers`.
+//   proxy: {
+//   host: '127.0.0.1',
+//     port: 9000,
+//     auth: {
+//     username: 'mikeymike',
+//       password: 'rapunz3l'
+//   }
+// },
+//
+//   // `cancelToken` specifies a cancel token that can be used to cancel the request
+//   // (see Cancellation section below for details)
+//   cancelToken: new CancelToken(function (cancel) {
+//   })
+// }

src/plugin/http/index.js

+import { Http } from './baseHttp'
+
+class HttpService {
+  install (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$Http = Http
+  }
+}
+
+export default new HttpService()

src/plugin/index.js

+import momentPlugin from './moment'
+import utils from './underscore'
+import http from './http'
+export {
+  momentPlugin,
+  utils,
+  http
+}

src/plugin/moment/index.js

+import moment from 'moment'
+
+class Moment {
+  install (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$moment = moment
+  }
+}
+
+export default new Moment()

src/plugin/underscore/index.js

+// https://www.npmjs.com/package/validate
+import _ from 'underscore'
+class Utils {
+  install (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$_ = _
+  }
+}
+
+export default new Utils()

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-
 Vue.use(Router)
-
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
@@ -21,13 +20,13 @@ export default new Router({
       component: () => import(/* web packChunkName: 'wxhome' */ 'pages/home'),
       children: [
         {
-          path: '/marketing',
+          path: 'marketing',
           name: 'marketing',
           component: () =>
             import(/* webpackChunkName: 'marketing' */ 'pages/marketing-center')
         },
         {
-          path: '/addmarketing',
+          path: 'addmarketing',
           name: 'addmarketing',
           component: () =>
             import(/* webpackChunkName: 'wxlogin' */ 'pages/addmarketing')

src/store/global/actions.js

+import * as types from './mutations_types'
+
+export default {
+  show_loading: ({
+    commit
+  }) => {
+    return new Promise((resolve, reject) => {
+      commit(types.SHOW_LOADING)
+      resolve()
+    })
+  },
+
+  hide_loading: ({
+    commit
+  }) => {
+    return new Promise((resolve, reject) => {
+      commit(types.HIDE_LOADING)
+      resolve()
+    })
+  }
+}

src/store/global/getters.js

+export default {
+  getLoadStatus (state) {
+    return state.ajax_loading
+  }
+}

src/store/global/index.js

+import state from './state'
+import mutations from './mutations'
+import getters from './getters'
+import actions from './actions'
+
+export default {
+  state,
+  mutations,
+  getters,
+  actions
+}

src/store/global/mutations.js

+import * as types from './mutations_types'
+
+// import { store } from 'utils/'
+
+export default {
+  [types.SHOW_LOADING] (state) {
+    state.ajax_loading = true
+  },
+
+  [types.HIDE_LOADING] (state) {
+    state.ajax_loading = false
+  }
+}

src/store/global/mutations_types.js

+// 显示加载
+export const SHOW_LOADING = 'SHOW_LOADING'
+
+// 关闭加载
+export const HIDE_LOADING = 'HIDE_LOADING'

src/store/global/state.js

+export default {
+  ajax_loading: false
+}

src/utils/index.js

+import date from './moment'
+
+export const M = date