123

package.json

@@ -23,8 +23,11 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "autoprefixer": "^9.8.6",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
     "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11"
   }

postcss.config.js

+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }
\ No newline at end of file

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <router-view></router-view>
   </div>
 </template>
+<script lang="ts">
+import Vue from 'vue';
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+export default Vue.extend({
+  name: 'Home',
 
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>
+});
+</script>

src/constant/index.ts

+// 静态数据的存放地址
\ No newline at end of file

src/layouts/index.vue

+<template>
+  <div class="Layout">
+      <!-- <header>header</header> -->
+      <div class='content'>
+          <slot>
+              <router-view></router-view>
+          </slot>
+      </div>
+      <!-- <footer>mxmwebsite</footer> -->
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'Layout'
+});
+</script>

src/main.ts

@@ -2,9 +2,40 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './style.css'
 
 Vue.config.productionTip = false
-
+const overscroll = function(el:any) {
+  el.addEventListener('touchstart', function() {
+    const top = el.scrollTop
+      , totalScroll = el.scrollHeight
+      , currentScroll = top + el.offsetHeight;
+    //If we're at the top or the bottom of the containers
+    //scroll, push up or down one pixel.
+    //
+    //this prevents the scroll from "passing through" to
+    //the body.
+    if(top === 0) {
+      el.scrollTop = 1;
+    } else if(currentScroll === totalScroll) {
+      el.scrollTop = top - 1;
+    }
+  });
+  el.addEventListener('touchmove', function(evt:any) {
+    //if the content is actually scrollable, i.e. the content is long enough
+    //that scrolling can occur
+    if(el.offsetHeight < el.scrollHeight)
+      evt._isScroller = true;
+  });
+}
+overscroll(document.querySelector('.scroll'));
+document.body.addEventListener('touchmove', function(evt:any) {
+  //In this case, the default behavior is scrolling the body, which
+  //would result in an overflow.  Since we don't want that, we preventDefault.
+  if(!evt._isScroller) {
+    evt.preventDefault();
+  }
+});
 new Vue({
   router,
   store,

src/router/index.ts

 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
+import ModeOne from '../layouts/index.vue'
 
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    name: 'Enter',
+    component: ModeOne,
+    redirect:'/welcome',
+    children:[
+      {
+        path: '/welcome',
+        name: 'Home',
+        component: ()=>import('@/views/Home.vue')
+      }
+    ]
   }
 ]
 

src/service/index.vue

+接口的统一出口文件
\ No newline at end of file

src/style.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+body,
+html{
+    position: fixed;
+}
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  <div class="home relative overflow-scroll">
+    <div class='page bg-red-600'></div>
+    <div class='page bg-blue-600'></div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
 export default Vue.extend({
   name: 'Home',
-  components: {
-    HelloWorld,
-  },
+
 });
 </script>
+
+<style scoped>
+.page{
+  height: 100vh;
+  width: 100vw;
+}
+</style>
\ No newline at end of file