Merge pull request #13 from PanJiaChen/feature/refactor

Feature/refactor

build/webpack.base.conf.js

@@ -46,10 +46,19 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test')]
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-sprite-loader',
+        include: [resolve('src/icons')],
+        options: {
+          symbolId: 'icon-[name]'
+        }
+      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
-        options: {
+        exclude: [resolve('src/icons')],
+        query: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]')
         }

package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "axios": "0.16.2",
-    "element-ui": "1.3.7",
-    "js-cookie": "^2.1.4",
-    "normalize.css": "3.0.2",
-    "nprogress": "^0.2.0",
-    "vue": "2.3.3",
-    "vue-router": "2.5.3",
+    "element-ui": "1.4.3",
+    "js-cookie": "2.1.4",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "vue": "2.4.2",
+    "vue-router": "2.7.0",
     "vuex": "2.3.1"
   },
   "devDependencies": {
@@ -53,10 +53,11 @@
     "rimraf": "2.6.0",
     "node-sass": "^4.5.0",
     "sass-loader": "6.0.5",
+    "svg-sprite-loader": "3.2.4",
     "url-loader": "0.5.8",
-    "vue-loader": "12.1.0",
+    "vue-loader": "13.0.4",
     "vue-style-loader": "3.0.1",
-    "vue-template-compiler": "2.3.3",
+    "vue-template-compiler": "2.4.2",
     "webpack": "2.6.1",
     "webpack-dev-middleware": "1.10.0",
     "webpack-hot-middleware": "2.18.0",

src/App.vue

@@ -9,8 +9,8 @@ export default {
   name: 'app'
 }
 </script>
+
 <style lang="scss">
+  @import '~normalize.css/normalize.css';// normalize.css 样式格式化
   @import './styles/index.scss'; // 全局自定义的css样式
 </style>
-
-

src/api/login.js

@@ -1,30 +1,27 @@
-import fetch from '@/utils/fetch';
+import fetch from '@/utils/fetch'
 
-export function login(email, password) {
+export function login(username, password) {
   return fetch({
     url: '/user/login',
     method: 'post',
     data: {
-      email,
+      username,
       password
     }
-  });
+  })
 }
 
 export function getInfo(token) {
   return fetch({
     url: '/user/info',
     method: 'get',
     params: { token }
-  });
+  })
 }
 
 export function logout() {
   return fetch({
     url: '/user/logout',
     method: 'post'
-  });
+  })
 }
-
-
-

src/api/table.js

@@ -1,11 +1,9 @@
-import fetch from '@/utils/fetch';
+import fetch from '@/utils/fetch'
 
 export function getList(params) {
   return fetch({
     url: '/table/list',
     method: 'get',
     params
-  });
+  })
 }
-
-

src/components/Hamburger/index.vue

@@ -1,32 +1,31 @@
 <template>
-    <div>
-        <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
-            height="64">
-            <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-                p-id="1692"></path>
-            <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-                p-id="1693"></path>
-            <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-                p-id="1694"></path>
-        </svg>
-    </div>
+  <div>
+    <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+        p-id="1692"></path>
+      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+        p-id="1693"></path>
+      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+        p-id="1694"></path>
+    </svg>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: 'hamburger',
-      props: {
-        isActive: {
-          type: Boolean,
-          default: false
-        },
-        toggleClick: {
-          type: Function,
-          default: null
-        }
-      }
+export default {
+  name: 'hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    toggleClick: {
+      type: Function,
+      default: null
     }
+  }
+}
 </script>
 
 <style scoped>

src/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import IconSvg from '@/components/Icon-svg'// svg组件
+
+// register globally
+Vue.component('icon-svg', IconSvg)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)