8.项目起步（2）

1.项目起步-axios基础配置

axios基础配置

四项最基础的配置

import axios from 'axios'// 创建axios实例
const http = axios.create({baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout: 5000
})// axios请求拦截器
instance.interceptors.request.use(config => {return config
}, e => Promise.reject(e))// axios响应式拦截器
instance.interceptors.response.use(res => res.data, e => {return Promise.reject(e)
})export default http

导入接口

2.项目起步-项目路由设计

设计首页和登录页的路由（一级路由）

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),// path和component对应关系的位置routes: [{path: '/',component: Layout,},{path: '/login',component: Login}]
})export default router

<template>我是首页
</template>

<template>我是登录页
</template>

设计分类页和默认Home页路由（二级路由）

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),// path和component对应关系的位置routes: [{path: '/',component: Layout,children: [{path: '',component: Home},{path: 'category',component: Category}]},{path: '/login',component: Login}]
})export default router

<template>我是home
</template>

<template>我是分类
</template>

<template><div>我是首页// 二级路由出口<RouterView/></div>
</template>