add

src/App.vue

@@ -5,14 +5,14 @@
     </div> -->
     <!-- <Rendertest></Rendertest> -->
     <!-- <dynamicComponent :name="name" :age="age" @onmmll="onmm"></dynamicComponent> -->
-    <!-- s<router-view /> -->
+    <router-view />
 
-    <funcComponent>
+    <!-- <funcComponent>
       <span @click="onmm">123456</span>
     </funcComponent>
     <el-button type="default" @click="turnon">goon</el-button>
     <el-button type="danger" @click="turnoff">godestroy</el-button>
-    <highcode :code="code" :language="language" />
+    <highcode :code="code" :language="language" /> -->
     <!-- <div id="flip-list-demo" class="demo" style="font-size:18px;padding:0 20px;">
           <button v-on:click="shuffle">Shuffle</button>
           <transition-group name="flip-list" tag="ul">
@@ -23,12 +23,12 @@
   </div>
 </template>
 <script>
-import Vue from "vue"
-import funcComponent from "./views/funcComponent"
-import dynamicComponent from "./views/dynamicComponent"
+//import Vue from "vue"
+// import funcComponent from "./views/funcComponent"
+// import dynamicComponent from "./views/dynamicComponent"
 export default {
   components: {
-    funcComponent
+    //  funcComponent
   },
   data() {
     return {
@@ -44,11 +44,11 @@ export default {
     }
   },
   methods: {
-    turnon() {
-      this.picke = new Vue(dynamicComponent).$mount()
-      console.log("picke", this.picke)
-      this.$el.appendChild(this.picke.$el)
-    },
+    // turnon() {
+    //   this.picke = new Vue(dynamicComponent).$mount()
+    //   console.log("picke", this.picke)
+    //   this.$el.appendChild(this.picke.$el)
+    // },
     turnoff() {
       if (this.picke) {
         this.picke.$destroy()

src/common/js/highcode.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="highcode">
-    <prism :language="language">{{ code }}</prism>
+    <prism inline :language="language">
+      <slot></slot>
+    </prism>
   </div>
 </template>
 <script>
 import Prism from "vue-prism-component"
+
+import "prismjs/components/prism-rust"
+
 export default {
   name: "highcode",
   components: {
@@ -16,7 +21,7 @@ export default {
       type: String
     },
     language: {
-      default: "",
+      default: "javascript",
       type: String
     }
   },

src/components/javascript/base.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="base onlearncontent">
+    <h4 class="on_text">布尔值也可作为比较的结果：</h4>
+    <highcode :language="'javascript'"> let isGreater = 4 > 1;</highcode>
+    <highcode :language="'javascript'"> alert( isGreater ); // true（比较的结果是 "yes"）</highcode>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>

src/components/vue/vueRouter.vue

@@ -3,7 +3,7 @@
     <h3>
       路由模式hash和history
     </h3>
-    <div class="on_text">router有两种模式：hash模式（默认）、history模式</div>
+    <highcode :language="'markdown'">router有两种模式：hash模式（默认）、history模式</highcode>
     <div class="on_text">hash模式:</div>
     <div class="on_text">
       路由的哈希模式地址带#号，利用了window可以监听onhashchange事件，当url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载

src/router/index.js

@@ -78,7 +78,7 @@ const routes = [
     ]
   },
   {
-    path: "/css",
+    path: "/cssAnimation",
     component: Main,
     meta: "动画整理",
     children: [
@@ -95,6 +95,19 @@ const routes = [
         component: () => import("../components/cssAnimation/someCollection.vue")
       }
     ]
+  },
+  {
+    path: "/js",
+    component: Main,
+    meta: "js",
+    children: [
+      {
+        path: "/js/base",
+        name: "基础知识",
+        meta: "js-基础知识",
+        component: () => import("../components/javascript/base.vue")
+      }
+    ]
   }
 ]
 

src/views/km.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="main">
+
+   <v-selecttop @showAnaly="showAnaly"></v-selecttop>
+
+  </div>
+</template>
+
+<script>
+export default {
+    methods:{
+        showAnaly(index,data){
+            console.log(index,data)
+        }
+    },
+  data() {
+    return {
+        showindex:0
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>