perf:按需引入element echarts 路由懒加载

.babelrc

@@ -12,15 +12,15 @@
     "stage-2"
   ],
   "plugins": [
-    "transform-vue-jsx",
-    "transform-runtime",
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
-    ]
+    ],
+    "transform-vue-jsx",
+    "transform-runtime"
   ],
   "env": {
     "test": {

config/index.js

@@ -58,26 +58,22 @@ module.exports = {
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
     cacheBusting: true,
 
-    cssSourceMap: false,
+    cssSourceMap: true,
   },
 
   build: {
     // Template for index.html
     index: path.resolve(__dirname, "../dist/index.html"),
-
     // Paths
     assetsRoot: path.resolve(__dirname, "../dist"),
     assetsSubDirectory: "myblog_static",
     assetsPublicPath: "./",
-
     /**
      * Source Maps
      */
-
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
     devtool: "#source-map",
-
     // Gzip off by default as many popular myblog_static hosts such as
     // Surge or Netlify already gzip all myblog_static assets for you.
     // Before setting to `true`, make sure to:

src/App.vue

@@ -187,9 +187,6 @@ export default {
                 .post(this.baseUrl + 'count/add/', {
                     ip: clientIp
                 })
-                .then((res) => {
-                    console.log(res)
-                })
                 .catch((e) => {
                     throw Error(e)
                 })
@@ -210,7 +207,6 @@ export default {
         },
 
         handleOpen (key, keyPath) {
-            console.log(key, keyPath)
             if (key === '3') {
                 this.chat_flag = true
                 this.onlineWebsocket() // 调用跳转

src/components/Article.vue

@@ -214,290 +214,290 @@
 
 <script>
 import Email from '@/components/email/Email'
-import VueMarkdown from "vue-markdown";
-import ArticleComment from "@/comment/ArticleComment";
-import EchartWeather from "@/weather/EchartWeather";
-import axios from "axios";
+import VueMarkdown from 'vue-markdown'
+import ArticleComment from '@/comment/ArticleComment'
+import EchartWeather from '@/weather/EchartWeather'
+import axios from 'axios'
 export default {
-  components: {
-    VueMarkdown, // 显示markdown的组件
-    ArticleComment, // 子组件评论
-    EchartWeather, // 天气
-    Email
-  },
-  name: "Article",
-  data() {
-    return {
-      msgDrawTitle:'~邮件沟通~',
-      direction:'rtl',
-      drawObj: {
-        show:false
-      },
-      // baseurl: '/api/',
-      baseurl: "/api/",
-      // baseurl: "http://yongma16.xyz/",
-      msg: "内容",
-      commmentSlogan: "评论区",
-      day_challenge: "训练营",
-      challenge_data: [
-        "css挑战",
-        "websocket聊天",
-        "echarts地图配置",
-        "vue3测试平台",
-        "更新中",
-      ],
-      md_data: [],
-      md_title: [],
-      the_title: "",
-      sear_page: 0,
-      index_page: 0,
-      data: ["threejs加载模型"],
-      slogan: "记忆碎片",
-      tabPosition: "left",
-      weather_title: [],
-      weather_high: [],
-      weather_low: [],
-      toTopIsShow: false,
-      article_loc: 0,
-      challenge_loc: -1,
-      topshow: false,
-      userImg: "",
-      username: "匿名",
-      articleCommit: "评论区",
-      // 分页实现 page1 page2 指向数组
-      pageAnalys: {},
-      currentPage: 1,
-      splitLength: 6, // 划分条数
-      total: 0,
-      pageSize: 4,
-      pageArray: [6, 8, 10],
-      postcomment: {
-        articleId: undefined,
-        articleCommit: null,
-      },
-      articleId: [], // 文章的id
-    };
-  },
-  watch: {
-    topshow: function (newvalue, oldvalue) {
-      if (newvalue === true) {
-        document.getElementById("topiconid").style.display = "none";
-      } else {
-        document.getElementById("topiconid").style.display = "block";
-      }
+    components: {
+        VueMarkdown, // 显示markdown的组件
+        ArticleComment, // 子组件评论
+        EchartWeather, // 天气
+        Email
     },
-  },
-  beforeDestroy() {
-    window.removeEventListener("onload", this.topvisible());
-  },
-  mounted() {
-    this.initPageSpliteFun();
-    window.addEventListener("onload", this.topvisible());
-  },
-  methods: {
-    initPageSpliteFun() {
-      this.splitLength = this.pageArray[0];
-    },
-    handleSizeChange(val) {
-      // 转到第一页md_title
-      let that = this;
-      that.pageAnalysFun(that.pageAnalys.allTitle, val); // 触发修改
-    },
-    handleCurrentChange(val) {
-      let that = this;
-      // 触发md_title的修改
-      that.currentPage = val;
-      that.pageAnalysFun(that.pageAnalys.allTitle); // 触发修改
+    name: 'Article',
+    data () {
+        return {
+            msgDrawTitle: '~邮件沟通~',
+            direction: 'rtl',
+            drawObj: {
+                show: false
+            },
+            // baseurl: '/api/',
+            baseurl: '/api/',
+            // baseurl: "http://yongma16.xyz/",
+            msg: '内容',
+            commmentSlogan: '评论区',
+            day_challenge: '训练营',
+            challenge_data: [
+                'css挑战',
+                'websocket聊天',
+                'echarts地图配置',
+                'vue3测试平台',
+                '更新中'
+            ],
+            md_data: [],
+            md_title: [],
+            the_title: '',
+            sear_page: 0,
+            index_page: 0,
+            data: ['threejs加载模型'],
+            slogan: '记忆碎片',
+            tabPosition: 'left',
+            weather_title: [],
+            weather_high: [],
+            weather_low: [],
+            toTopIsShow: false,
+            article_loc: 0,
+            challenge_loc: -1,
+            topshow: false,
+            userImg: '',
+            username: '匿名',
+            articleCommit: '评论区',
+            // 分页实现 page1 page2 指向数组
+            pageAnalys: {},
+            currentPage: 1,
+            splitLength: 6, // 划分条数
+            total: 0,
+            pageSize: 4,
+            pageArray: [6, 8, 10],
+            postcomment: {
+                articleId: undefined,
+                articleCommit: null
+            },
+            articleId: [] // 文章的id
+        }
     },
-    pageAnalysFun(allTitleArray, selectListLength) {
-      let that = this;
-      that.total = allTitleArray.length; // 总数
-      let splitLength = that.splitLength;
-      if (!selectListLength) {
-        that.splitLength = that.splitLength;
-      } else {
-        this.currentPage = 1;
-        that.splitLength = selectListLength; // 划分长度
-      }
-      splitLength = that.splitLength;
-      let splitNum = Math.ceil(that.total / splitLength); // 向上取整
-      that.pageAnalys.childNum = splitNum; // 子数组个数
-      that.pageAnalys.allTitle = allTitleArray; // 所有标题
-      that.pageAnalys.titleArray = new Array(); // 子数组个数
-      let locSplit = 0;
-      let locLength = splitLength; // 每一页的条数
-      while (splitNum--) {
-        // 循环获取子数组
-        if (splitNum >= 1) {
-          let childArray = [];
-          for (
-            let temp = locSplit;
-            temp < locLength && temp < that.total;
-            ++temp, ++locSplit
-          ) {
-            childArray.push(that.pageAnalys.allTitle[temp]);
-          }
-          that.pageAnalys.titleArray.push(childArray);
-          locLength += splitLength; // 分割数组长度后移
-        } else {
-          // 最后一个数组
-          let childArray = [];
-          for (let temp = locSplit; temp < that.total; ++temp) {
-            childArray.push(that.pageAnalys.allTitle[temp]);
-          }
-          that.pageAnalys.titleArray.push(childArray);
-          break;
+    watch: {
+        topshow: function (newvalue, oldvalue) {
+            if (newvalue === true) {
+                document.getElementById('topiconid').style.display = 'none'
+            } else {
+                document.getElementById('topiconid').style.display = 'block'
+            }
         }
-      }
-      try {
-        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
-      } catch (e) {
-        throw Error(e);
-      }
     },
-    increment: function () {
-      this.$store.commit("increment");
+    beforeDestroy () {
+        window.removeEventListener('onload', this.topvisible())
     },
-    topvisible: function () {
-      let dom = document.getElementById("hometitle");
-      this.topshow = this.elementIsVisibleInViewport(dom);
-      setTimeout(this.topvisible);
+    mounted () {
+        this.initPageSpliteFun()
+        window.addEventListener('onload', this.topvisible())
     },
-    elementIsVisibleInViewport: function (el, partiallyVisible = false) {
-      try {
-        if (el && el.getBoundingClientRect instanceof Function) {
-          const { top, left, bottom, right } = el.getBoundingClientRect();
-          return partiallyVisible
-            ? ((top > 0 && top < innerHeight) ||
+    methods: {
+        initPageSpliteFun () {
+            this.splitLength = this.pageArray[0]
+        },
+        handleSizeChange (val) {
+            // 转到第一页md_title
+            let that = this
+            that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
+        },
+        handleCurrentChange (val) {
+            let that = this
+            // 触发md_title的修改
+            that.currentPage = val
+            that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
+        },
+        pageAnalysFun (allTitleArray, selectListLength) {
+            let that = this
+            that.total = allTitleArray.length // 总数
+            let splitLength = that.splitLength
+            if (!selectListLength) {
+                that.splitLength = that.splitLength
+            } else {
+                this.currentPage = 1
+                that.splitLength = selectListLength // 划分长度
+            }
+            splitLength = that.splitLength
+            let splitNum = Math.ceil(that.total / splitLength) // 向上取整
+            that.pageAnalys.childNum = splitNum // 子数组个数
+            that.pageAnalys.allTitle = allTitleArray // 所有标题
+            that.pageAnalys.titleArray = new Array() // 子数组个数
+            let locSplit = 0
+            let locLength = splitLength // 每一页的条数
+            while (splitNum--) {
+                // 循环获取子数组
+                if (splitNum >= 1) {
+                    let childArray = []
+                    for (
+                        let temp = locSplit;
+                        temp < locLength && temp < that.total;
+                        ++temp, ++locSplit
+                    ) {
+                        childArray.push(that.pageAnalys.allTitle[temp])
+                    }
+                    that.pageAnalys.titleArray.push(childArray)
+                    locLength += splitLength // 分割数组长度后移
+                } else {
+                    // 最后一个数组
+                    let childArray = []
+                    for (let temp = locSplit; temp < that.total; ++temp) {
+                        childArray.push(that.pageAnalys.allTitle[temp])
+                    }
+                    that.pageAnalys.titleArray.push(childArray)
+                    break
+                }
+            }
+            try {
+                that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
+            } catch (e) {
+                throw Error(e)
+            }
+        },
+        increment: function () {
+            this.$store.commit('increment')
+        },
+        topvisible: function () {
+            let dom = document.getElementById('hometitle')
+            this.topshow = this.elementIsVisibleInViewport(dom)
+            setTimeout(this.topvisible)
+        },
+        elementIsVisibleInViewport: function (el, partiallyVisible = false) {
+            try {
+                if (el && el.getBoundingClientRect instanceof Function) {
+                    const { top, left, bottom, right } = el.getBoundingClientRect()
+                    return partiallyVisible
+                        ? ((top > 0 && top < innerHeight) ||
                 (bottom > 0 && bottom < innerHeight)) &&
                 ((left > 0 && left < innerWidth) ||
                   (right > 0 && right < innerWidth))
-            : top >= 0 &&
+                        : top >= 0 &&
                 left >= 0 &&
                 bottom <= innerHeight &&
-                right <= innerWidth;
-        }
-      } catch (r) {
-        throw Error(r);
-      }
-    },
-    li_errorClass: function () {},
-    cssPage: function (index) {
-      this.challenge_loc = index;
-      let name = this.challenge_data[index];
-      switch (name) {
-        case "css挑战":
-          this.$router
-            .push({
-              path: "/css",
-            })
-            .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "echarts地图配置":
-          this.$router
-            .push({
-              path: "/home",
-            })
-            .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "websocket聊天":
-          this.$router
-            .push({
-              path: "/onlinewebsocket",
-            })
-            .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "vue3测试平台":
-          window.open("http://yongma16.xyz/emoji_api/");
-          break;
-        default:
-          break;
-      }
-    },
-    open_message: function () {
-      this.$notify({
-        title: "欢迎合作",
-        message: "邮箱：1432448610@qq.com",
-        position: "bottom-right",
-      });
-    },
-    openDraw() {
-      this.drawObj.show = true;
-    },
-
-    toTop: function () {
-      location.href = "#home"; // 定位
-      document.getElementById("mainappid").scrollTop = 0;
-    }, // 返回天气相当于返回顶部
-    getCommentsFromArticle(id) {
-      this.$refs.commentRef.getComments(id); // 触发子组件的方法
-    },
-    getArticles: function (page) {
-      let that = this; // this指向转化
-      that.article_loc = page;
-      // 查找文章id 从1开始
-      that.postcomment.articleId =
+                right <= innerWidth
+                }
+            } catch (r) {
+                throw Error(r)
+            }
+        },
+        li_errorClass: function () {},
+        cssPage: function (index) {
+            this.challenge_loc = index
+            let name = this.challenge_data[index]
+            switch (name) {
+            case 'css挑战':
+                this.$router
+                    .push({
+                        path: '/css'
+                    })
+                    .catch((error) => {
+                        throw Error(error)
+                    })
+                break
+            case 'echarts地图配置':
+                this.$router
+                    .push({
+                        path: '/home'
+                    })
+                    .catch((error) => {
+                        throw Error(error)
+                    })
+                break
+            case 'websocket聊天':
+                this.$router
+                    .push({
+                        path: '/onlinewebsocket'
+                    })
+                    .catch((error) => {
+                        throw Error(error)
+                    })
+                break
+            case 'vue3测试平台':
+                window.open('http://yongma16.xyz/emoji_api/')
+                break
+            default:
+                break
+            }
+        },
+        open_message: function () {
+            // this.$notify({
+            //     title: '欢迎合作',
+            //     message: '邮箱：1432448610@qq.com',
+            //     position: 'bottom-right'
+            // })
+        },
+        openDraw () {
+            this.drawObj.show = true
+        },
+
+        toTop: function () {
+            location.href = '#home' // 定位
+            document.getElementById('mainappid').scrollTop = 0
+        }, // 返回天气相当于返回顶部
+        getCommentsFromArticle (id) {
+            this.$refs.commentRef.getComments(id) // 触发子组件的方法
+        },
+        getArticles: function (page) {
+            let that = this // this指向转化
+            that.article_loc = page
+            // 查找文章id 从1开始
+            that.postcomment.articleId =
         that.articleId[
-          parseInt(page + (that.currentPage - 1) * that.splitLength)
-        ];
-      // 提交数据 page从0开始
-      axios
-        .post(that.baseurl + "article/index/", {
-          value: page + (that.currentPage - 1) * that.splitLength,
-          // 传入索引
-        })
-        .then((res) => {
-          if (res.data.code === 1) {
-            let respdata = res.data;
-            let content = respdata.article;
-            that.md_data = []; // 清空
-            content.map((o) => {
-              that.md_data.push(o); // 传入一个文章
-            });
-            that.the_title = respdata.the_title;
-          } else if (res.data.code === 0) {
-            // alter("失败！")
-            that.$message.error("失败");
-          }
-        })
-        .catch((error) => {
-          throw Error(error);
-        });
-      that.getCommentsFromArticle(that.postcomment.articleId);
+            parseInt(page + (that.currentPage - 1) * that.splitLength)
+        ]
+            // 提交数据 page从0开始
+            axios
+                .post(that.baseurl + 'article/index/', {
+                    value: page + (that.currentPage - 1) * that.splitLength
+                    // 传入索引
+                })
+                .then((res) => {
+                    if (res.data.code === 1) {
+                        let respdata = res.data
+                        let content = respdata.article
+                        that.md_data = [] // 清空
+                        content.map((o) => {
+                            that.md_data.push(o) // 传入一个文章
+                        })
+                        that.the_title = respdata.the_title
+                    } else if (res.data.code === 0) {
+                        // alter("失败！")
+                        that.$message.error('失败')
+                    }
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+            that.getCommentsFromArticle(that.postcomment.articleId)
+        }
     },
-  },
-  created: function () {
+    created: function () {
     // 初始化
-    let that = this;
-    axios
-      .get(that.baseurl + "article/index/")
-      .then((res) => {
-        let resdata = res.data;
-        let content = resdata.article; // 传递过来的文章 进行处理
-        let title = resdata.title;
-        that.articleId = resdata.articleObjectId;
-        that.postcomment.articleId = resdata.articleId;
-        this.$refs.commentRef.getComments(that.postcomment.articleId); // 触发子组件的方法
-        content.map((o) => {
-          that.md_data.push(o);
-        });
-        let titleAllArray = title.map((o) => {
-          return o;
-        });
-        that.the_title = resdata.the_title;
-        this.pageAnalysFun(titleAllArray); // 分页
-      })
-      .catch((r) => {
-        throw Error(r);
-      }); // get log
-  },
-};
+        let that = this
+        axios
+            .get(that.baseurl + 'article/index/')
+            .then((res) => {
+                let resdata = res.data
+                let content = resdata.article // 传递过来的文章 进行处理
+                let title = resdata.title
+                that.articleId = resdata.articleObjectId
+                that.postcomment.articleId = resdata.articleId
+                this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
+                content.map((o) => {
+                    that.md_data.push(o)
+                })
+                let titleAllArray = title.map((o) => {
+                    return o
+                })
+                that.the_title = resdata.the_title
+                this.pageAnalysFun(titleAllArray) // 分页
+            })
+            .catch((r) => {
+                throw Error(r)
+            }) // get log
+    }
+}
 </script>
 
 <style scoped>

src/importEchartsComponents.js

 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core'
 // 引入柱状图图表，图表后缀都为 Chart
+
 import { BarChart, LineChart, MapChart, GraphChart, PieChart} from 'echarts/charts'
 // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
@@ -8,15 +9,14 @@ import {
     TooltipComponent,
     GridComponent,
     DatasetComponent,
-    TransformComponent
+    TransformComponent,
+    ToolboxComponent
 } from 'echarts/components'
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
 import { CanvasRenderer } from 'echarts/renderers'
 
-import Vue from 'vue'
-
 // 注册必须的组件
 echarts.use([
     TitleComponent,
@@ -31,9 +31,10 @@ echarts.use([
     PieChart,
     LabelLayout,
     UniversalTransition,
-    CanvasRenderer
+    CanvasRenderer,
+    ToolboxComponent
 ])
-const importEchartsComponents = () => {
+const importEchartsComponents = (Vue) => {
     Vue.prototype.$echarts = echarts// 绑定echarts
 }
 export default importEchartsComponents

src/importElement.js

-import Vue from 'vue'
 import {
     Container,
     Header,
@@ -20,11 +19,12 @@ import {
     FormItem,
     Avatar,
     Link,
-    Notification,
-    Loading
+    Loading,
+    Pagination,
+    Alert
 } from 'element-ui'
 
-const importElementComponents = () => {
+const importElementComponents = (Vue) => {
     Vue.use(Container)
     Vue.use(Header)
     Vue.use(Main)
@@ -44,10 +44,11 @@ const importElementComponents = () => {
     Vue.use(MenuItemGroup)
     Vue.use(Avatar)
     Vue.use(Link)
-    Vue.use(Notification)
     Vue.use(Loading)
+    Vue.use(Pagination)
+    Vue.use(Alert)
     Vue.prototype.$message = Message
-    Vue.prototype.$notify = Notification
+    // Vue.prototype.$notify = Notification
 }
 
 export default importElementComponents

src/main.js

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import './plugins/axios'
 import App from './App'
-import 'element-ui/lib/theme-chalk/index.css'
 import cookies from 'vue-cookies'
-import 'github-markdown-css/github-markdown.css'
 import hljs from 'highlight.js'
-import 'highlight.js/styles/github.css'
-import router from './router'
+import {router, useRouter} from './router'
 import importElementComponents from './importElement'
-
 import importEchartsComponents from './importEchartsComponents'
 
+// 路由
+useRouter(Vue)
+
 // 按需引入elementui
-importElementComponents()
+importElementComponents(Vue)
 
-//按需引入echarts
-importEchartsComponents()
+// 按需引入echarts
+importEchartsComponents(Vue)
 
 Vue.config.productionTip = false
 Vue.use(cookies)
 
 // Vue.use(hljs)
-Vue.directive('highlight', function(el) {
+Vue.directive('highlight', function (el) {
     const blocks = el.querySelectorAll('pre code')
     blocks.forEach(block => {
         hljs.highlightBlock(block)
     })
 })
 
-// Vue.prototype.http = axios;
 Vue.prototype.$cookies = cookies
 
-Vue.prototype.$cookies.set("user_session", "null")
+Vue.prototype.$cookies.set('user_session', 'null')
 
 new Vue({
     el: '#app',

src/router/index.js

-import Vue from 'vue'
-
-import Nprogress from 'nprogress'
+// import Nprogress from 'nprogress'
 import 'nprogress/nprogress.css'
 // import { getToken } from '@/utils/auth'
 import { isEmpty } from '@/utils'
 import VueRouter from 'vue-router'
-// import Router from 'vue-router'
 import store from '@/store'
-// store
-import Article from '@/components/Article'
-import Login from '@/components/Login'
-import Register from '@/components/Register'
-import Onlinewebsocket from '@/components/Onlinewebsocket'
-import Home from '@/components/Home'
-import Bilicom from '@/components/Bilicom'
-import Mavoneditor from '@/components/Mavoneditor'
-
-import GrilShow from '@/components/GrilShow'
-import Csslearn from '@/components/Csslearn'
+const Article = () => import('@/components/Article')
+const Login = () => import('@/components/Login')
+const Register = () => import('@/components/Register')
+const Onlinewebsocket = () => import('@/components/Onlinewebsocket')
+const Home = () => import('@/components/Home')
+const Bilicom = () => import('@/components/Bilicom')
+const Mavoneditor = () => import('@/components/Mavoneditor')
+const GrilShow = () => import('@/components/GrilShow')
+const Csslearn = () => import('@/components/Csslearn')
 
-Vue.use(VueRouter)
 const defaultRoutes = [
     {
         path: '/',
         name: 'Article',
-        component: Article
+        component: Article,
+        hidden: true
     },
     {
         path: '/login',
         name: 'Login',
-        component: Login
+        component: Login,
+        hidden: true
     },
     {
         path: '/register',
         name: 'Register',
-        component: Register
+        component: Register,
+        hidden: true
     },
     {
         path: '/home',
         name: 'Home',
-        component: Home
+        component: Home,
+        hidden: true
     },
     {
         path: '/onlinewebsocket',
         name: 'Onlinewebsocket',
-        component: Onlinewebsocket
+        component: Onlinewebsocket,
+        hidden: true
     },
     {
         path: '/bilicom',
         name: 'Bilicom',
-        component: Bilicom
+        component: Bilicom,
+        hidden: true
     },
     {
         path: '/mavoneditor',
         name: 'Mavoneditor',
-        component: Mavoneditor
+        component: Mavoneditor,
+        hidden: true
     },
     {
         path: '/gril',
         name: 'grilshow',
-        component: GrilShow
+        component: GrilShow,
+        hidden: true
     },
     {
         path: '/css',
         name: 'css',
-        component: Csslearn
+        component: Csslearn,
+        hidden: true
     }
 ]
 
 let routes = [
     ...defaultRoutes
-    // ...modulesRoutes,
-    // ...errorRoutes,
-    // ...dashboardRouters
 ]
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
     return originalPush.call(this, location).catch((err) => err)
 }
+// 路由
 const router = new VueRouter({
     routes
 })
@@ -113,8 +114,12 @@ router.beforeEach(async (to, from, next) => {
     }
 })
 
-router.afterEach((to, from) => {
-    Nprogress.done()
-})
+// router.afterEach((to, from) => {
+//     Nprogress.done()
+// })
+
+const useRouter = (Vue) => {
+    Vue.use(VueRouter)
+}
 
-export default router
+export {router, useRouter}

src/utils/auth.js

 import { getCookie, setCookie, removeCookie } from './util.cookies.js'
 const TOKEN_KEY = 'token'
-    /**
+/**
      * 获取tonken
      */
-export function getToken() {
+export function getToken () {
     return getCookie(TOKEN_KEY)
 }
-export function setToken(token, optins) {
+export function setToken (token, optins) {
     return setCookie(TOKEN_KEY, token, optins)
 }
-export function removeToken() {
+export function removeToken () {
     return removeCookie(TOKEN_KEY)
 }

src/utils/index.js

- export function isEmpty(obj, allowBlank = false) {
-     if (isNull(obj)) return true
-     if (isArray(obj)) return obj.length === 0
-     if (isString(obj)) return !(allowBlank || obj.length > 0)
-     if (isObject(obj)) return isEmptyObject(obj)
-     for (var key in obj)
-         if (obj.hasOwnProperty(key)) return false
-     return obj === undefined || (!allowBlank ? obj === '' : false)
- }
- /**
+export function isEmpty (obj, allowBlank = false) {
+    if (isNull(obj)) return true
+    if (isArray(obj)) return obj.length === 0
+    if (isString(obj)) return !(allowBlank || obj.length > 0)
+    if (isObject(obj)) return isEmptyObject(obj)
+    for (var key in obj) { if (obj.hasOwnProperty(key)) return false }
+    return obj === undefined || (!allowBlank ? obj === '' : false)
+}
+/**
   * 判断是否不为空
   * @param {*} obj
   */
- export function isNotEmpty(obj, allowBlank = false) {
-     return !isEmpty(obj, allowBlank)
- }
- export function isEmptyObject(obj) {
-     if (!obj) return true
-     for (const name in obj) {
-         return false
-     }
-     return true
- }
- export function isNotEmptyObject(obj) {
-     return isNotEmptyObject(obj)
- }
- /**
+export function isNotEmpty (obj, allowBlank = false) {
+    return !isEmpty(obj, allowBlank)
+}
+export function isEmptyObject (obj) {
+    if (!obj) return true
+    for (const name in obj) {
+        return false
+    }
+    return true
+}
+export function isNotEmptyObject (obj) {
+    return isNotEmptyObject(obj)
+}
+/**
   * 是否是对象
   * @param {*} input
   */
- export function isObject(input) {
-     return Object.prototype.toString.call(input) === '[object Object]'
- }
- /**
+export function isObject (input) {
+    return Object.prototype.toString.call(input) === '[object Object]'
+}
+/**
   * 是否是数组
   * @param {*} input
   */
- export function isArray(input) {
-     return (
-         input instanceof Array ||
+export function isArray (input) {
+    return (
+        input instanceof Array ||
          Object.prototype.toString.call(input) === '[object Array]'
-     )
- }
- export function isDate(input) {
-     return (
-         input instanceof Date ||
+    )
+}
+export function isDate (input) {
+    return (
+        input instanceof Date ||
          Object.prototype.toString.call(input) === '[object Date]'
-     )
- }
- export function isNumber(input) {
-     return (
-         input instanceof Number ||
+    )
+}
+export function isNumber (input) {
+    return (
+        input instanceof Number ||
          Object.prototype.toString.call(input) === '[object Number]'
-     )
- }
- export function isString(input) {
-     return (
-         input instanceof String ||
+    )
+}
+export function isString (input) {
+    return (
+        input instanceof String ||
          Object.prototype.toString.call(input) === '[object String]'
-     )
- }
- export function isBoolean(input) {
-     return typeof input === 'boolean'
- }
- export function isFunction(input) {
-     return typeof input === 'function'
- }
- export function isNull(input) {
-     return input === undefined || input === null
- }
- export function isPlainObject(obj) {
-     if (
-         obj &&
+    )
+}
+export function isBoolean (input) {
+    return typeof input === 'boolean'
+}
+export function isFunction (input) {
+    return typeof input === 'function'
+}
+export function isNull (input) {
+    return input === undefined || input === null
+}
+export function isPlainObject (obj) {
+    if (
+        obj &&
          Object.prototype.toString.call(obj) === '[object Object]' &&
          obj.constructor === Object &&
          !hasOwnProperty.call(obj, 'constructor')
-     ) {
-         var key
-         for (var k in obj) {
-             key = k
-         }
-         return key === undefined || hasOwnProperty.call(obj, key)
-     }
-     return false
- }
- /**
+    ) {
+        var key
+        for (var k in obj) {
+            key = k
+        }
+        return key === undefined || hasOwnProperty.call(obj, key)
+    }
+    return false
+}
+/**
   * 转树形
   */
- export function toTree(data) {
-     // 删除 所有 children,以防止多次调用
-     data.forEach(function(item) {
-             delete item.children
-         })
-         // 将数据存储为 以 id 为 KEY 的 map 索引数据列
-     var map = {}
-     data.forEach(function(item) {
-         map[item.id] = item
-     })
-     var val = []
-     data.forEach(function(item) {
-         // 以当前遍历项，的pid,去map对象中找到索引的id
-         var parent = map[item.parentId]
+export function toTree (data) {
+    // 删除 所有 children,以防止多次调用
+    data.forEach(function (item) {
+        delete item.children
+    })
+    // 将数据存储为 以 id 为 KEY 的 map 索引数据列
+    var map = {}
+    data.forEach(function (item) {
+        map[item.id] = item
+    })
+    var val = []
+    data.forEach(function (item) {
+        // 以当前遍历项，的pid,去map对象中找到索引的id
+        var parent = map[item.parentId]
 
-         // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
-         if (parent) {;
-             (parent.children || (parent.children = [])).push(item)
-         } else {
-             //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
-             val.push(item)
-         }
-     })
-     return val
- }
- /**
+        // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
+        if (parent) {
+            ;
+            (parent.children || (parent.children = [])).push(item)
+        } else {
+            // 如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
+            val.push(item)
+        }
+    })
+    return val
+}
+/**
   * 通用排序
   */
- export function sortExp(key, isAsc) {
-     return function(x, y) {
-         if (isNaN(key)) {
-             if (x[key] > y[key]) {
-                 return 1 * (isAsc ? 1 : -1);
-
-             } else if (x[key] < y[key]) {
-                 return -1 * (isAsc ? 1 : -1);
-             } else {
-                 return 0;
-             }
-
-         } else {
-             return (x[key] - y[key]) * (isAsc ? 1 : -1)
-         }
-     }
- }
+export function sortExp (key, isAsc) {
+    return function (x, y) {
+        if (isNaN(key)) {
+            if (x[key] > y[key]) {
+                return 1 * (isAsc ? 1 : -1)
+            } else if (x[key] < y[key]) {
+                return -1 * (isAsc ? 1 : -1)
+            } else {
+                return 0
+            }
+        } else {
+            return (x[key] - y[key]) * (isAsc ? 1 : -1)
+        }
+    }
+}
\ No newline at end of file

src/utils/util.cookies.js

 import JsCookie from 'js-cookie'
 
 /**
- * 
+ *
  * @param {String} name 名称
  * @param {*} value 值
  * @param {Object} cookieSetting 配置
  */
-export function setCookie(name = 'default', value, cookieSetting) {
+export function setCookie (name = 'default', value, cookieSetting) {
     const currentCookieSetting = {
         expires: 1
     }
@@ -14,24 +14,23 @@ export function setCookie(name = 'default', value, cookieSetting) {
     JsCookie.set(`VBI-${name}`, value, currentCookieSetting)
 }
 /**
- * 
- * @param {String} name 
+ *
+ * @param {String} name
  */
 
-
-export function getCookie(name = 'default') {
+export function getCookie (name = 'default') {
     return JsCookie.get(`VBI-${name}`)
 }
 /**
  * 获取全部cookie
  */
-export function getCookieAll() {
+export function getCookieAll () {
     return JsCookie.get()
 }
 /**
- * 
+ *
  * @param {String} name 名称
  */
-export function removeCookie(name) {
+export function removeCookie (name) {
     return JsCookie.remove(`VBI-${name}`)
-}
+}
\ No newline at end of file