reconstruct project, using vue router

Author: WyvonJ

.eslintrc.js

@@ -13,6 +13,8 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-param-reassign': 'off',
+    'no-use-before-define': 'off',
   },
   overrides: [
     {

src/App.vue

@@ -3,7 +3,8 @@
     <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/javascript">JavaScript</router-link> |
-      <router-link to="/css">CSS</router-link>
+      <router-link to="/css">CSS</router-link> |
+      <router-link to="/vue">Vue</router-link>
     </div>
     <router-view/>
   </div>

src/components/utils/FeButton.vue renamed to src/components/FeButton.vue

@@ -49,6 +49,7 @@ export default {
     },
     handlerTabPaneClick(pane) {
       this.current = pane.name;
+      this.$emit('change', this.current);
     },
   },
   mounted() {
@@ -73,7 +74,7 @@ export default {
       border-right: 1px solid #42b983;
       display: inline-block;
       width: 120px;
-      padding: auto 12px;
+      padding: 0 4px;
       text-align: center;
       color: #42b983;
       &.current {

src/components/utils/FeTabPane.vue renamed to src/components/FeTabPane.vue

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import Utils from './components/utils';
+import Utils from './components';
 import './assets/style/index.scss';
 
 Vue.config.productionTip = false;

src/components/utils/FeTabs.vue renamed to src/components/FeTabs.vue

@@ -0,0 +1,30 @@
+export default [
+  {
+    path: 'horizontalverticalcenter',
+    name: '水平垂直居中',
+    component() {
+      return import(/* webpackChunkName: "HorizontalVerticalCenter" */ '@/views/css/HorizontalVerticalCenter.vue');
+    },
+  },
+  {
+    path: 'flexbox',
+    name: 'Flex布局',
+    component() {
+      return import(/* webpackChunkName: "FlexBox" */ '@/views/css/FlexBox.vue');
+    },
+  },
+  {
+    path: 'twocolumn',
+    name: '两栏布局',
+    component() {
+      return import(/* webpackChunkName: "TwoColumn" */ '@/views/css/TwoColumn.vue');
+    },
+  },
+  {
+    path: 'threecolumn',
+    name: '三栏布局',
+    component() {
+      return import(/* webpackChunkName: "ThreeColumn" */ '@/views/css/ThreeColumn.vue');
+    },
+  },
+];

src/components/utils/index.js renamed to src/components/index.js

@@ -1,7 +1,11 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from '../views/Home.vue';
+import JavaScriptRoutes from './javascript';
+import CssRoutes from './css';
+import VueRoutes from './vue';
 
+console.log('JavaScriptRoutes', JavaScriptRoutes);
 Vue.use(VueRouter);
 
 const routes = [
@@ -19,13 +23,23 @@ const routes = [
     component() {
       return import(/* webpackChunkName: "javascript" */ '../views/JavaScript.vue');
     },
+    children: JavaScriptRoutes,
   },
   {
     path: '/css',
     name: 'Css',
     component() {
       return import(/* webpackChunkName: "css" */ '../views/Css.vue');
     },
+    children: CssRoutes,
+  },
+  {
+    path: '/vue',
+    name: 'Vue',
+    component() {
+      return import(/* webpackChunkName: "vue" */ '../views/Vue.vue');
+    },
+    children: VueRoutes,
   },
 ];
 

src/components/javascript/Promise.vue

@@ -0,0 +1,37 @@
+export default [
+  {
+    path: 'eventloop',
+    name: '事件循环',
+    component() {
+      return import(/* webpackChunkName: "EventLoop" */ '@/views/javascript/EventLoop.vue');
+    },
+  },
+  {
+    path: 'asynchronous',
+    name: '异步',
+    component() {
+      return import(/* webpackChunkName: "Asynchronous" */ '@/views/javascript/Asynchronous.vue');
+    },
+  },
+  {
+    path: 'crossorigin',
+    name: '跨域',
+    component() {
+      return import(/* webpackChunkName: "CrossOrigin" */ '@/views/javascript/CrossOrigin.vue');
+    },
+  },
+  {
+    path: 'this',
+    name: 'this',
+    component() {
+      return import(/* webpackChunkName: "This" */ '@/views/javascript/This.vue');
+    },
+  },
+  {
+    path: 'promise',
+    name: 'Promise',
+    component() {
+      return import(/* webpackChunkName: "Promise" */ '@/views/javascript/Promise.vue');
+    },
+  },
+];

src/main.js

@@ -0,0 +1 @@
+export default [];

src/router/css.js

@@ -1,25 +1,37 @@
 <template>
   <div class="css">
-    <FeTabs>
-      <FeTabPane name="TwoColumn" label="两栏布局">
-        <TwoColumn/>
-      </FeTabPane>
-      <FeTabPane name="ThreeColumn" label="三栏布局">
-        <ThreeColumn/>
+    <FeTabs @change="handlerChange">
+      <FeTabPane
+        :name="tab.name"
+        :label="tab.label"
+        v-for="tab of tabs"
+        :key="tab.name"
+      >
       </FeTabPane>
     </FeTabs>
+    <router-view/>
   </div>
 </template>
 
 <script>
-import TwoColumn from '@/components/css/TwoColumn.vue';
-import ThreeColumn from '@/components/css/ThreeColumn.vue';
+import CssTabs from '@/router/css';
 
 export default {
   name: 'Css',
-  components: {
-    TwoColumn,
-    ThreeColumn,
+  data() {
+    return {
+      tabs: CssTabs.map(({ path, name }) => ({
+        name: path,
+        label: name,
+      })),
+    };
+  },
+  methods: {
+    handlerChange(path) {
+      if (!this.$route.path.includes(path)) {
+        this.$router.push(`/css/${path}`);
+      }
+    },
   },
 };
 </script>

src/router/index.js

@@ -1,25 +1,37 @@
 <template>
   <div class="javascript">
-    <FeTabs>
-      <FeTabPane name="EventLoop" label="事件循环">
-        <EventLoop />
-      </FeTabPane>
-      <FeTabPane name="CrossOrigin" label="跨域">
-        <CrossOrigin />
+    <FeTabs @change="handlerChange">
+      <FeTabPane
+        :name="tab.name"
+        :label="tab.label"
+        v-for="tab of tabs"
+        :key="tab.name"
+      >
       </FeTabPane>
     </FeTabs>
+    <router-view/>
   </div>
 </template>
 
 <script>
-import EventLoop from '@/components/javascript/EventLoop.vue';
-import CrossOrigin from '@/components/javascript/CrossOrigin.vue';
+import JavaScriptTabs from '@/router/javascript';
 
 export default {
   name: 'JavaScript',
-  components: {
-    EventLoop,
-    CrossOrigin,
+  data() {
+    return {
+      tabs: JavaScriptTabs.map(({ path, name }) => ({
+        name: path,
+        label: name,
+      })),
+    };
+  },
+  methods: {
+    handlerChange(path) {
+      if (!this.$route.path.includes(path)) {
+        this.$router.push(`/javascript/${path}`);
+      }
+    },
   },
 };
 </script>

src/router/javascript.js

@@ -0,0 +1,42 @@
+<template>
+  <div class="vue">
+    <FeTabs @change="handlerChange">
+      <FeTabPane
+        :name="tab.name"
+        :label="tab.label"
+        v-for="tab of tabs"
+        :key="tab.name"
+      >
+      </FeTabPane>
+    </FeTabs>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import VueTabs from '@/router/vue';
+
+export default {
+  name: 'Vue',
+  data() {
+    return {
+      tabs: VueTabs.map(({ path, name }) => ({
+        name: path,
+        label: name,
+      })),
+    };
+  },
+  methods: {
+    handlerChange(path) {
+      if (!this.$route.path.includes(path)) {
+        this.$router.push(`/vue/${path}`);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.vue {
+}
+</style>

src/router/vue.js

@@ -0,0 +1,17 @@
+<template>
+  <div class="horizontal-vertical-center">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HorizontalVerticalCenter',
+};
+</script>
+
+<style lang="scss">
+.orizontal-vertical-center {
+
+}
+</style>

src/views/Css.vue

@@ -9,9 +9,6 @@
 // 跨域
 export default {
   name: 'CrossOrigin',
-  components: {
-
-  },
   data() {
     return {
 
@@ -24,10 +21,16 @@ export default {
   },
   methods: {
     // Nginx设置跨域请求头, 可以直接获取
+    // *表示接受任意域名
     //  add_header 'Access-Control-Allow-Origin' *;
+    // 是否允许发送Cookie
     //  add_header 'Access-Control-Allow-Credentials' 'true';
+    // 表示服务器支持的所有跨域方法
     //  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
     getHelloJsCORS() {
+      // 简单请求指的是get post options
+      // 浏览器发现请求为简单的ajax跨源请求, 就自动在请求头加上Origin字段, 用来说明此次请求来自哪个源
+      // 如果Origin指定的源不在许可范围之内, 则回应的头中不包含Access-Control-Allow-Origin字段, 因此浏览器知道出错了, 从而抛出一个错误
       fetch('http://192.168.3.4:5001/static/hello.js')
         .then((res) => {
           console.log('CORS', res);

src/views/JavaScript.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="event-loop">
+    事件循环
   </div>
 </template>
 

src/views/Vue.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="promise">
+    <FeButton @click="promisePractise"> Promise练习 </FeButton>
+  </div>
+</template>
+
+<script>
+import PromiseAPlus from './Promise/PromiseAPlus';
+// Promise
+export default {
+  name: 'Promise',
+  data() {
+    return {
+      flag: false,
+    };
+  },
+  methods: {
+    promisePractise() {
+      const p = new PromiseAPlus((resolve, reject) => {
+        this.flag = !this.flag;
+        if (this.flag === false) {
+          resolve(1);
+        } else {
+          reject(2);
+        }
+      }).then((res) => {
+        console.log('res', res);
+      }, (reason) => {
+        console.log('reason', reason);
+      });
+      console.log(p);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.promise {
+}
+</style>