feat: vue3 code

src/sites/assets/styles/variables.scss

@@ -0,0 +1,18 @@
+// doc
+$doc-default-color: #fa2c19;
+$doc-default-primary-bg: linear-gradient(
+    135deg,
+    rgba(250, 25, 44, 1) 0%,
+    rgba(250, 39, 40, 1) 45%,
+    rgba(250, 56, 31, 1) 83%,
+    rgba(250, 63, 25, 1) 100%
+);
+// header
+$doc-default-header-color: $white;
+$doc-header-height: 64px;
+// nav
+$doc-default-nav-bg: $white;
+$doc-default-nav-color: $title-color;
+// footer
+$doc-default-header-color: $white;
+$doc-footer-height: 73px;

src/sites/doc/App.vue

@@ -1,55 +1,10 @@
 <template>
-  <div class="doc-header">
-    NutUI
-  </div>
-  <div class="doc-nav">
-    <ol>
-      <li>指南</li>
-      <ul>
-        <li>介绍</li>
-        <li>快速上手</li>
-        <li>主题定制</li>
-        <li>国际化</li>
-        <li>更新日志</li>
-        <li>资源</li>
-      </ul>
-    </ol>
-    <ol v-for="_nav in nav" :key="_nav">
-      <li>{{ _nav.name }}</li>
-      <ul>
-        <li v-for="_package in _nav.packages" :key="_package">
-          <router-link :to="_package.name.toLocaleLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}
-          </router-link>
-        </li>
-      </ul>
-    </ol>
-  </div>
-  <div class="doc-h5-preview">
-    <iframe :src="demoUrl" frameborder="0"></iframe>
-  </div>
   <router-view />
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
-import { nav, versions } from "@/config";
+import { defineComponent } from 'vue';
 export default defineComponent({
-  name: "doc",
-  components: {},
-  data() {
-    return {
-      nav,
-      versions,
-      demoUrl: `demo.html`
-    };
-  },
-  watch: {
-    $route(to) {
-      const { origin, pathname } = window.location;
-      this.demoUrl = `${origin}${pathname.replace("index.html", "")}demo.html#${
-        to.path
-      }`;
-    }
-  }
+  name: 'app'
 });
 </script>
 
@@ -63,57 +18,7 @@ export default defineComponent({
   background: #f7f8fa;
   height: 100%;
   width: 100%;
-}
-.doc {
-  &-header {
-    position: fixed;
-    z-index: 2;
-    left: 0;
-    right: 0;
-    background: $button-default-bg-color;
-    height: 57px;
-    line-height: 57px;
-    text-align: left;
-    padding: 0 50px;
-    font-size: 20px;
-    color: $white;
-  }
-
-  &-nav {
-    position: fixed;
-    z-index: 1;
-    background: #fff;
-    width: 220px;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    padding: 80px 20px;
-    > ol {
-      border-bottom: 1px solid red;
-      > li {
-        font-weight: bold;
-      }
-      > ul {
-        li {
-        }
-      }
-    }
-  }
-
-  &-h5-preview {
-    height: 667px;
-    width: 375px;
-    position: fixed;
-    right: 30px;
-    top: 100px;
-    box-shadow: #ebedf0 0 4px 12px;
-    border-radius: 12px;
-    overflow: hidden;
-
-    iframe {
-      height: 100%;
-      width: 100%;
-    }
-  }
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/sites/doc/components/DemoPreview.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="doc-demo-preview">
+    <iframe :src="url" frameborder="0"></iframe>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'doc-demo-preview',
+  props: {
+    url: String
+  }
+});
+</script>
+
+<style lang="scss">
+.doc {
+  &-demo-preview {
+    height: 667px;
+    width: 375px;
+    position: fixed;
+    right: 30px;
+    top: 100px;
+    box-shadow: #ebedf0 0 4px 12px;
+    border-radius: 12px;
+    overflow: hidden;
+
+    iframe {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+</style>

src/sites/doc/components/Footer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="doc-footer">
+    2020 JDRD-FEB 前端开发部.All Rights Reserved.
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'doc-footer'
+});
+</script>
+
+<style lang="scss">
+.doc {
+  &-footer {
+    background: $doc-default-primary-bg;
+    height: $doc-footer-height;
+    line-height: $doc-footer-height;
+    text-align: center;
+    font-size: 16px;
+    color: $white;
+  }
+}
+</style>

src/sites/doc/components/Header.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="doc-header">
+    NutUI
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'doc-header'
+});
+</script>
+
+<style lang="scss">
+.doc {
+  &-header {
+    background: $doc-default-primary-bg;
+    height: $doc-header-height;
+    line-height: $doc-header-height;
+    text-align: left;
+    padding: 0 50px;
+    font-size: 20px;
+    color: $white;
+  }
+}
+</style>

src/sites/doc/components/Nav.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="doc-nav">
+    <ol class="introduce">
+      <li>指南</li>
+      <li>介绍</li>
+      <li>快速上手</li>
+      <li>主题定制</li>
+      <li>国际化</li>
+      <li>更新日志</li>
+      <li>资源</li>
+    </ol>
+    <ol v-for="_nav in nav" :key="_nav">
+      <li>{{ _nav.name }}</li>
+      <ul>
+        <li class="active" v-for="_package in _nav.packages" :key="_package">
+          <router-link :to="_package.name.toLocaleLowerCase()">
+            {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
+          </router-link>
+        </li>
+      </ul>
+    </ol>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+import { nav } from '@/config';
+export default defineComponent({
+  name: 'doc-nav',
+  setup() {
+    return reactive({
+      nav
+    });
+  }
+});
+</script>
+
+<style lang="scss">
+.doc {
+  &-nav {
+    background: $white;
+    width: 291px;
+    flex-shrink: 0;
+    height: 100%;
+    padding: 50px 0 50px 35px;
+    ol {
+      &.introduce {
+        padding-left: 5px;
+        li {
+          cursor: pointer;
+          &:hover {
+            color: $doc-default-color;
+          }
+        }
+      }
+      li {
+        height: 48px;
+        line-height: 48px;
+        font-size: 14px;
+        color: $doc-default-nav-color;
+        font-weight: bold;
+        position: relative;
+
+        &.active {
+          &::before {
+            position: absolute;
+            content: '';
+            left: 0;
+            top: 50%;
+            margin-top: -14px;
+            bottom: 0;
+            width: 6px;
+            height: 28px;
+            background: $doc-default-primary-bg;
+            border-radius: 3px;
+          }
+        }
+      }
+      > ul {
+        li {
+          padding-left: 29px;
+          cursor: pointer;
+          &:hover {
+            a {
+              color: $doc-default-color;
+            }
+          }
+          a {
+            &:hover {
+              color: $doc-default-color;
+              &:visited {
+                color: $doc-default-color;
+              }
+            }
+            &:visited {
+              color: $title-color;
+            }
+
+            height: 100%;
+            b {
+              font-weight: normal;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/sites/doc/router.ts

@@ -1,6 +1,10 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-
-const routes: Array<RouteRecordRaw> = [];
+import Index from "./views/Index.vue";
+const routes: Array<RouteRecordRaw> = [{
+  path: '/',
+  name: 'index',
+  component: Index
+}];
 // import { nav } from '@/config';
 // nav.forEach(item => {
 //   item.packages.forEach(_item => {
@@ -21,6 +25,12 @@ files.keys().forEach(component => {
   // console.log(component)
 });
 
+routes.push({
+  name: 'NotFound',
+  path: '/:path(.*)+',
+  redirect: () => '/',
+});
+
 const router = createRouter({
   history: createWebHashHistory(),
   routes

src/sites/doc/views/Index.vue

@@ -0,0 +1,62 @@
+<template>
+  <doc-header></doc-header>
+  <div class="doc-content">
+    <doc-nav></doc-nav>
+    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
+    <div class="doc-content-document">
+      <router-view />
+    </div>
+  </div>
+  <doc-footer></doc-footer>
+</template>
+<script lang="ts">
+import { defineComponent, ref, reactive, watch } from 'vue';
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { nav, versions } from '@/config';
+import Header from '@/sites/doc/components/Header.vue';
+import Nav from '@/sites/doc/components/Nav.vue';
+import Footer from '@/sites/doc/components/Footer.vue';
+import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
+export default defineComponent({
+  name: 'doc',
+  components: {
+    [Header.name]: Header,
+    [Nav.name]: Nav,
+    [Footer.name]: Footer,
+    [DemoPreview.name]: DemoPreview
+  },
+  setup(prop, { emit, slots }) {
+    const data = reactive({
+      demoUrl: 'demo.html'
+    });
+
+    // 获取当前路由
+    const route = useRoute();
+    // 获取路由实例
+    const router = useRouter();
+
+    onBeforeRouteUpdate(() => {
+      // 当当前路由发生变化时，调用回调函数
+      // const { origin, pathname } = window.location;
+      // data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${route.path}`;
+    });
+
+    return data;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.doc {
+  &-content {
+    height: 100%;
+    display: flex;
+
+    &-document {
+      margin: 10px;
+      border: 1px solid red;
+      width: 800px;
+    }
+  }
+}
+</style>

src/sites/mobile/App.vue

@@ -3,26 +3,33 @@
   <router-view />
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
+import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+
 import { isMobile } from '@/sites/assets/util';
 export default defineComponent({
   name: 'app',
   components: {},
-  data() {
-    return {
-      title: 'NutUI'
-    };
-  },
-  watch: {
-    $route(to) {
-      const { origin, hash, pathname } = window.top.location;
-      if (!isMobile && to.href != hash) {
-        window.top.location.replace(`${origin}${pathname}#/${to.name}`);
-        this.title = to.name;
-      } else {
-        this.title = '';
-      }
-    }
+  setup() {
+    const title = ref('NutUI');
+
+    // 获取当前路由
+    const route = useRoute();
+    // 获取路由实例
+    const router = useRouter();
+
+    onBeforeRouteUpdate(() => {
+      // 当当前路由发生变化时，调用回调函数
+      // const { origin, hash, pathname } = window.top.location;
+      // if (!isMobile && to.href != hash) {
+      //   window.top.location.replace(`${origin}${pathname}#/${to.name}`);
+      //   title.value = to.name;
+      // } else {
+      //   title.value = '';
+      // }
+    });
+
+    return title;
   }
 });
 </script>

src/sites/mobile/components/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="index">
     <div class="index-header">
-      <img src="@/sites/assets/images/logo.png" alt="" srcset="" />
+      <img src="@/sites/assets/images/logo-red.png" alt="" srcset="" />
       <div class="info">
         <h1>Nut UI</h1>
         <p>一套京东风格的轻量级移动端 Vue 组件库</p>
@@ -12,8 +12,7 @@
         <li>{{ _nav.name }}</li>
         <ul>
           <li v-for="_package in _nav.packages" :key="_package">
-            <router-link :to="_package.name.toLocaleLowerCase()"
-              >{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}
+            <router-link :to="_package.name.toLocaleLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}
             </router-link>
           </li>
         </ul>
@@ -23,16 +22,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { nav, versions } from "@/config";
+import { defineComponent, reactive } from 'vue';
+import { nav, versions } from '@/config';
 export default defineComponent({
-  name: "doc",
+  name: 'doc',
   components: {},
-  data() {
-    return {
+  setup() {
+    return reactive({
       nav,
       versions
-    };
+    });
   }
 });
 </script>

src/sites/mobile/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import Index from "./components/index.vue";
+import Index from "./components/Index1.vue";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",

src/styles/index.scss

@@ -1 +0,0 @@
-@import './variable';

vue.config.js

@@ -17,7 +17,7 @@ module.exports = {
       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
-        additionalData: `@import "~@/styles/variables.scss";`,
+        additionalData: `@import "~@/styles/variables.scss";@import "~@/sites/assets/styles/variables.scss";`,
       },
     },
   },