增加pug fontawesome 更新package.json

build/webpack.base.conf.js

@@ -51,6 +51,10 @@ module.exports = {
         options: vueLoaderConfig,
       },
       {
+        test: /\.pug$/,
+        loader: 'pug'
+      },
+      {
         test: /\.js$/,
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],

package.json

@@ -52,6 +52,9 @@
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
+    "pug": "^2.0.3",
+    "pug-filters": "^3.1.0",
+    "pug-loader": "^2.4.0",
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

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/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
+    .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: '首页'
-            }
-          ]
-        },
-        {
-          routes: [
-            {
-              path: 'home',
-              title: '精准营销',
-              children: [
-                {
-                  path: 'marketing',
-                  title: '营销推送'
-                },
-                {
-                  path: 'addmarketing',
-                  title: '推送详情'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      menus: []
+      logo,
+      menus: [],
+      menuList: []
     }
   },
-  computed: {
-    onRoutes (e) {
-      console.log(1)
-      return this.$route.path.replace('/', '')
-    }
+  components: {
+    sidebarItem
+  },
+  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
+    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/http/index.js

-import userApi from './user'
-import orderApi from './order'
-import returnOrderApi from './returnOrder'
-import OrderConfigApi from './orderConfig'
-
-export const user = userApi
-export const order = orderApi
-export const returnOrder = returnOrderApi
-export const orderConfig = OrderConfigApi

src/main.js

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

src/http/baseHttp.js → src/plugin/http/baseHttp.js

 import axios from 'axios'
 // import qs from 'qs'
 import store from '@/store'
-import config from '../config'
+import config from '../../config/index'
 // Add a request interceptor
 axios.interceptors.request.use(function (config) {
   // Do something before request is sent
@@ -32,6 +32,10 @@ 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
@@ -60,22 +64,23 @@ api.interceptors.response.use(function (response) {
 // api.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 
 class BaseHttpServer {
-  constructor (url) {
-    if (url) {
-      this.baseUrl = url
+  constructor (mock = false) {
+    if (mock) {
+      this.api = mockApi
+    } else {
+      this.api = api
     }
-    this.api = api
   }
 
   get (url, params) {
-    return this.api.get(`${this.baseUrl}/${url}`, { params })
+    return this.api.get(`${url}`, { params })
       .catch((error) => {
         console.log(error)
       })
   }
 
   post (url, params) {
-    return this.api.post(`${this.baseUrl}/${url}`, params)
+    return this.api.post(`/${url}`, params)
       .catch((error) => {
         console.log(error)
       })

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 validate from './validate'
 import utils from './underscore'
+import http from './http'
 export {
   momentPlugin,
   utils,
-  validate
+  http
 }

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-
 Vue.use(Router)
-
 export default new Router({
   routes: [
     {