feat: add simple style.

src/api/base.js

+import axios from "axios";
+
+const BASIC_URL = "http://zacharyzlj.cn:3000/";
+
+function createBaseInstance() {
+  const instance = axios.create({ baseURL: BASIC_URL });
+
+  return instance;
+}
+
+export const requset = createBaseInstance();

src/api/index.js

+import { requset } from "./base";
+
+export const getBanner = () => requset.get("/banner?type=0");

src/components/content/NavBar.vue

 <template>
   <div id="nav">
-    <router-link v-for="item in navData" :to="item.path">{{item.title}}</router-link> 
+    <router-link v-for="item in navData" :key="item.title" :to="item.path">{{item.title}}</router-link> 
     <!-- <router-link to="/">Home</router-link> |
     <router-link to="/My">My</router-link> -->
   </div>
@@ -8,19 +8,19 @@
 
 <script>
 export default {
-    name: 'NavBar',
-    data() {
-        return {
-            active: 0,
-            navData: [
-                {title:'Home', path:'/'},
-                {title:'My', path:'/My'},
-            ]
-        }
-    },
+  name: 'NavBar',
+  data() {
+    return {
+      active: 0,
+      navData: [
+        {title:'音乐库', path:'/'},
+        {title:'我的音乐', path:'/My'},
+      ]
+    }
+  },
 }
 </script>
 
 <style lang="css">
     
-</style>
\ No newline at end of file
+</style>

src/router/index.js

-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
-const Home = () => import('views/Home')
-const My = () => import('views/My')
+const Home = () => import("views/Home");
+const My = () => import("views/My");
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
+    path: "/",
+    name: "Home",
     component: Home
   },
   {
-    path: '/My',
-    name: 'My',
+    path: "/My",
+    name: "My",
     component: My
-  },
-]
+  }
+];
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
-})
+});
 
-export default router
+export default router;

src/views/Home.vue

 <template>
+    <div>
     <h1>Home</h1>
+      <div v-for="banner in banners" :key="banner.targetId">
+        <img v-bind:src="banner.imageUrl" alt="">
+      </div>
+    </div>
 </template>
 
-  <script>
-  </script>
+<script>
+import { getBanner } from "../api";
+
+export default {
+  name: 'Home',
+  created() {
+    getBanner().then(res => {
+          console.log(res.data.banners);
+          this.banners = res.data.banners;
+        });
+  },
+  data() {
+    return {
+      banners: []
+    };
+  }
+}
+
+</script>
 
 <style scoped>
-</style>
\ No newline at end of file
+</style>

vue.config.js

@@ -2,10 +2,12 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        'components': '@/components',
-        'assets': '@/assets',
-        'views': '@/views',
+        assets: "@/assets",
+        components: "@/components",
+        views: "@/views",
+        api: "@/api"
       }
     }
   }
-}
\ No newline at end of file
+};
+