perf: 封装挑战榜的事件点击

src/App.vue

 <template>
   <div id="app">
     <el-container>
-      <el-aside v-if="navigate_flag ? false : true">
+      <el-aside v-if="!navigate_flag">
         <router-link to="/">
           <svg
             class="icon"
@@ -78,9 +78,9 @@
               >{{ authSlogan }}</span
             ></a
           >
-          <i style="font-weight: bold; font-style: normal" v-if="chat_flag"
-            >&nbsp;&nbsp;在线聊天室</i
-          >
+<!--          <i style="font-weight: bold; font-style: normal" v-if="chat_flag"-->
+<!--            >&nbsp;&nbsp;在线聊天室</i-->
+<!--          >-->
           <div style="float: right; overflow: hidden;display: flex;justify-items: center;align-items:center;word-spacing: 16px;">
             <a href="https://codechina.csdn.net/qq_38870145/myblogvue"
               ><img

src/api/user.js

@@ -5,15 +5,15 @@ const _products = [
 ]
 
 export default {
-    getProducts(cb) {
+    getProducts (cb) {
         setTimeout(() => cb(_products), 100)
     },
 
-    buyProducts(products, cb, errorCb) {
+    buyProducts (products, cb, errorCb) {
         setTimeout(() => {
             // simulate random checkout failure.
-            (Math.random() > 0.5 || navigator.webdriver) ?
-            cb(): errorCb()
+            (Math.random() > 0.5 || navigator.webdriver)
+                ? cb() : errorCb()
         }, 100)
     }
-}
\ No newline at end of file
+}

src/components/Article.vue

@@ -62,17 +62,17 @@
       >
         <h1>{{ day_challenge }}</h1>
         <ul
-          v-for="(item, index) in challenge_data"
-          :key="item"
+          v-for="(item, index) in challengeConfig"
+          :key="index"
           class="ul_style"
         >
           <div
             v-bind:class="[
-              { li_active: index == challenge_loc },
+              { li_active: index === challenge_loc },
               li_errorClass,
             ]"
           >
-            <li @click="cssPage(index)">{{ item }}</li>
+            <li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
           </div>
         </ul>
       </el-card>
@@ -84,7 +84,7 @@
         shadow="always"
         style="position: static; margin-top: 2%;text-align: center"
       >
-        <span style="line-height: 30px;" class="uni-font">爬取天气预报</span>
+        <span style="line-height: 30px;" class="uni-font">未来天气</span>
         <div style="positon: relative; width: 100%; height: 100%">
           <EchartWeather> </EchartWeather>
         </div>
@@ -148,17 +148,17 @@
       >
         <h1>{{ day_challenge }}</h1>
         <ul
-          v-for="(item, index) in challenge_data"
-          :key="item"
+          v-for="(item, index) in challengeConfig"
+          :key="index"
           class="ul_style"
         >
           <div
             v-bind:class="[
-              { li_active: index == challenge_loc },
+              { li_active: index === challenge_loc },
               li_errorClass,
             ]"
           >
-            <li @click="cssPage(index)">{{ item }}</li>
+            <li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
           </div>
         </ul>
       </el-card>
@@ -199,7 +199,6 @@
         /></a>
       </el-card>
 
-
     </div>
     <!-- 上滑滚动图标 -->
     <div class="rightclass">
@@ -274,13 +273,51 @@ export default {
             msg: '内容',
             commmentSlogan: '评论区',
             day_challenge: '训练营',
-            challenge_data: [
-                'css挑战',
-                'websocket聊天',
-                'echarts地图配置',
-                'vue3测试平台',
-                '数据可视化平台',
-                '更新中'
+            challengeConfig: [
+                {
+                    title: 'css挑战',
+                    order: 1,
+                    isJumpPath: true,
+                    isJumpUrl: false,
+                    path: '/css'
+                },
+                {
+                    title: 'websocket聊天',
+                    order: 2,
+                    isJumpPath: true,
+                    isJumpUrl: false,
+                    path: '/onlinewebsocket'
+                },
+                {
+                    title: 'echarts地图配置',
+                    order: 3,
+                    isJumpPath: true,
+                    isJumpUrl: false,
+                    path: '/home'
+                },
+                {
+                    title: 'vue3测试平台',
+                    order: 4,
+                    isJumpPath: false,
+                    isJumpUrl: true,
+                    url: 'http://yongma16.xyz/emoji_api/',
+                    path: ''
+                },
+                {
+                    title: '数据可视化平台',
+                    order: 5,
+                    isJumpPath: false,
+                    isJumpUrl: true,
+                    url: 'https://yongma16.xyz/fund-web',
+                    path: ''
+                },
+                {
+                    title: '更新中',
+                    order: 6,
+                    isJumpPath: false,
+                    isJumpUrl: false,
+                    path: ''
+                }
             ],
             md_data: [],
             md_title: [],
@@ -435,45 +472,18 @@ export default {
             }
         },
         li_errorClass: function () {},
-        cssPage: function (index) {
+        clickChallengeEvent: function (item, 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聊天':
+            if (item.isJumpPath) {
                 this.$router
                     .push({
-                        path: '/onlinewebsocket'
+                        path: item.path
                     })
                     .catch((error) => {
                         throw Error(error)
                     })
-                break
-            case 'vue3测试平台':
-                window.open('http://yongma16.xyz/emoji_api/')
-                break
-            case '数据可视化平台':
-                window.open('https://yongma16.xyz/fund-web')
-                break
-            default:
-                break
+            } else if (item.isJumpUrl) {
+                window.open(item.url)
             }
         },
         open_message: function () {

src/echarts/Map.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-// import * as echarts from 'echarts'
+import * as echarts from 'echarts'
 
 export default {
     name: 'Map',

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.
-//vue cdn
-// import Vue from 'vue'
-// import VueRouter from 'vue-router'
-// import axios from 'axios'
-// import hljs from 'highlight.js'
-// import * as echarts from 'echarts'
-// import importElementComponents from './importElement'
-// import importEchartsComponents from './importEchartsComponents'
+// vue cdn
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import axios from 'axios'
+import hljs from 'highlight.js'
+import * as echarts from 'echarts'
+import importElementComponents from './importElement'
+import importEchartsComponents from './importEchartsComponents'
 // 样式cnd
-// import 'github-markdown-css/github-markdown.css'
-// import 'nprogress/nprogress.css'
+import 'github-markdown-css/github-markdown.css'
+import 'nprogress/nprogress.css'
 // 无需cdn
 import useRouter from './router'
 import cookies from 'vue-cookies'
@@ -57,11 +57,11 @@ if (env === 'production') {
     // 路由
     const router = useRouter(Vue, VueRouter)
 
-    // // 按需引入elementui
-    // importElementComponents(Vue)
-    //
-    // // 按需引入echarts
-    // importEchartsComponents(Vue)
+    // 按需引入elementui
+    importElementComponents(Vue)
+
+    // 按需引入echarts
+    importEchartsComponents(Vue)
 
     Vue.config.productionTip = false
     Vue.use(cookies)

src/store/index.js

-// import Vue from 'vue'
-// import Vuex from 'vuex'
+import Vue from 'vue'
+import Vuex from 'vuex'
 
 
 // import createLogger from '../../../src/plugins/logger'

src/weather/EchartWeather.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-// import * as echarts from 'echarts'
+import * as echarts from 'echarts'
 export default {
     name: 'EchartWeather',
     data () {