一、Axios的安装和简单封装

安装Axios

npm install axios

在utils目录下创建 http.js 文件, 内容如下

import axios from 'axios'// 创建axios实例
const http = axios.create({baseURL: 'http://localhost:9999',//后端服务器地址timeout: 5000
})// axios请求拦截器
http.interceptors.request.use(config => {return config
}, e => Promise.reject(e))// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {return Promise.reject(e)
})export default http

封装请求函数, 然后进行测试

在api目录下创建 test.js

import http from '@/utils/http'export function getTestAPI () {return http({url: 'home/test'})
}

调用getTestAPI

//测试接口函数
import { getTestAPI } from '@/api/testAPI'
getTestAPI().then(res=>{console.log(res);
})

二、路由设计

创建一级路由

先创建文件

<template><div>首页</div>
</template><script>
export default {// name: 'Layout',
}
</script><style></style>

然后修改 router/index.js 内容如下

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'const routes = [{path: '/',component: Layout}
]
const router = createRouter({history: createWebHashHistory(),routes
})export default router

打开 views/App.vue ,内容如下

<template><!-- 一级路由出口 --><router-view></router-view>
</template><style></style>

运行项目,如果报Component name "index" should always be multi-word这个错误, 

打开.eslintrc.js, 在rules中添加

'vue/multi-word-component-names': 'off'

创建二级路由

创建文件

<template><div>Home 页面</div>
</template><script>
export default {}
</script><style></style>

修改路由配置 router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'const routes = [{// Home 页面是首页下的二级页面,所以要配置在首页路径下path: '/',component: Layout,children: [{// Home 页默认在首页显示，所以 path 为空path: '',component: Home,}]},{path: '/login',component: Login}
]
const router = createRouter({history: createWebHashHistory(),routes
})export default router

修改 views/Layout/index.vue

<template><div>首页<!-- 二级路由出口 --><router-view></router-view></div>
</template><script>
export default {// name: 'Layout',
}
</script><style></style>

运行项目

三、导入静态资源和CSS文件

css存放CSS文件, img存放图片资源

基础css样式的使用