vue

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,//关闭语法检查
  devServer:{
proxy:{
  '/api':{
    target:'http://111.229.37.167/',
    changeOrigin:true
  }
}
  }
})

vue.config.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)//安装插件
axios.defaults.baseURL="/api"
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

main.js

<template>
  <div id="app">
  <Menus/>
  <br><br>
  <div id="comtr">
  <router-view class="left" name="Left1"></router-view>
  <router-view class="main" name="Main1"></router-view>
 <router-view/>
 </div>
  </div>
</template>

<script>
import Menus from './components/Menus.vue'
export default {
  name:'app',
  components:{
  Menus
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

app.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import Left from '@/components/Left'
import Main from '@/components/Main'
Vue.use(VueRouter)

const routes = [
  
  {
    path: '/',
    components: {'Left1':Left,'Main1':Main}
  },
  {
    path: '/index',
    components: {'Left1':Left,'Main1':Main}
  },
 
  {
    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/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

router----index.js

<template>
    <div id="go">
        <ul>
            <li><a href="#">新书上市</a></li>
            <li><a href="#">热销书籍</a></li>
            <li><a href="#">视频教学</a></li>
        </ul>
         <div>
        <h3>图书分类</h3>
        <div v-for="category in categoryies" :key="category.id">
                <h5>{{category.name}}</h5>
                <router-link v-for="child in category.children" :key="child.id"
                :to="'/category/'+child.id">{{child.name}}</router-link>
        </div>
    </div>
    </div>
    
    
</template>
<script>
/* eslint-disable */
export default {
    data(){
        return{
            categoryies:[]
        }
    },
    created(){
        this.axios.get('/category')
        .then(response=>{
            if(response.status==200){
                this.categoryies=response.data
                consolo.log(response.data)
            }
        })
        .catch(function (error){
            console.log(error);
        })
    }
}
</script>
<style scoped>
a{
    text-decoration: none;

}
ul{
    list-style: none;
    margin-left: 32px;
  
}
li{
    width: 100px;
}
#go{
    text-align: center;
     float: left;
     margin-left: 40px;
    width: 250px;
    height: 687px;
    background-color: sienna;
}
</style>

left.vue

<template>
    <div class="bookshow">
<h3>新书上市</h3>
<div class="book" v-for="book in books " :key="book.id">
<router-link :to="'/book/'+book.id">
<img :src="book.imgUrl"/><br>
{{book.title}}
<figcaption>
<p><span>$ {{book.price}}</span></p>
</figcaption>
</router-link>
<button class="addCartButton" >加入购物车</button>
</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            books:[]
        }
    },
    created(){//this.axios.get('/book.php')}
    this.axios.get('/book/new')
              .then(response=>{
                if(response.status==200){
                    this.books=response.data
                }
              }).catch(error=>{alert(error)})
    
},


}

</script>
<style scoped>
img{
    margin-left: 5px;
}
.bookshow{float: left; width: 60%;}
.book{
   float: left; width: 30%;
   border-style:double;
}
.addCartButton{
    padding: 5px 10px 6px;
    color: #fff;
    border: none;
    border-bottom: solid 1px #222;
    border-radius: 5px;
    box-shadow: 0 1px 3px #999;
    text-shadow: 0,-1px 3px #444;
    cursor: pointer;
    background-color: #e33100;
}
.addCartButton:hover{
    text-shadow: 0 1px 1px #444;
}
</style>

main.vue

<template>
    <div class="menus">
        <ul>
            <li><router-link to="/index">首页</router-link></li>
            <li><a href="javascript:;">特价书</a></li>
            <li><a href="javascript:;">教材</a></li>
            <li><router-link to="/vedio">视听教程</router-link></li>
           <li><router-link to="/about">关于我们</router-link></li>
            
        </ul>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
        div{
             text-align: center; 
        }
        a{
            text-decoration: none;
            display: block;
            color: #fff;
            width: 232px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #fff;
            border-width: 1px 1px 0 0;
            background: #255f9e;
            
        }
        li{
            list-style-type: none;
            float: left;
            text-align: center;
            position: relative;
            
        }
        
        li a:hover{
            color: #fff;
            background: #ffb100;
        }
       li ul {
            position: absolute;
            left: -40px;
            top: 40px;
            margin-top: 1px;
            font-size: 12px;
        }
        [v-cloak]{
            display: none;
        }
</style>

menus.vue