首页

src/api/base.ts

@@ -0,0 +1,4 @@
+import axios from "axios"
+axios.defaults.baseURL="https://tomcat.theluyuan.com/Learning"
+
+export default axios

src/api/index.ts

@@ -0,0 +1,5 @@
+import axios from "./base"
+
+export function login(){
+   return axios.post("/user/login",{userName:"zs",password:"123"})
+}

src/components/HelloWorld.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/navitem.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="navitem">
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/views/Home.vue

@@ -10,19 +10,19 @@
 
     <div class="navs">
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" class="icon" />
         <p>名师推荐</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>订阅专栏</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>我的收藏</p>
       </div>
       <div class="nav-item">
-        <img src="../static/img/icon.png">
+        <img src="../static/img/icon.png" />
         <p>下载管理</p>
       </div>
     </div>
@@ -30,55 +30,63 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-
+import { defineComponent } from "vue";
+import {login} from "../api/index"
 export default defineComponent({
-  name: 'Home',
+  name: "Home",
+  setup() {
+    function denglu() {
+     login().then((res:any)=>{
+       console.log(res)
+     })
+    }
+    return {
+      denglu
+    };
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.home{
+.home {
   height: 100vh;
-  background:#F5F5F5;
-  .top{
+  background: #f5f5f5;
+  .top {
     width: 100%;
-    background: #5677FF;
-    padding-top:125px;
+    background: #5677ff;
+    padding-top: 125px;
     padding-bottom: 93px;
     position: relative;
-    .content{
-      color:white;
-      font-size:49px;
+    .content {
+      color: white;
+      font-size: 49px;
       margin-left: 118px;
-      .biaoti{
-        font-size:67px ;
+      .biaoti {
+        font-size: 67px;
         margin-bottom: 41px;
       }
     }
 
-    .right{
+    .right {
       width: 268px;
       height: 277px;
-      background: gold;
-      position:absolute;
-      right:0;
+      background: white;
+      position: absolute;
+      right: 0;
       bottom: 0;
     }
-
   }
 
-  .navs{
+  .navs {
     width: 900px;
     height: 180px;
     background: white;
-    margin:0 auto;
+    margin: 0 auto;
     margin-top: 20px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     text-align: center;
   }
-
 }
 </style>