接上篇文章继续写
1.清空项目
2. 创建一个utils 文件夹 用于我们配置一些简单工具类![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c7a7236430938f967f095ccb679428d7.png)
2.1在新建的utlis 下面新建一个 requset.js 文件 (书写一些关于网络请求的东西)如下所示
// 第一步导入我们 axiso
// 第二部导入 错误信息提示
// 第三步 创建一个axiso 请求
// 把axiso 方法导出
import axios from 'axios'
import { Message } from 'element-ui'
const service = axios.create({
// 请求的同一根地址
baseURL: 'http://localhost:8090/',
// 请求超时时间
timeout: 5000
})
// 第四步配置发起请求的配置项
service.interceptors.request.use(
config => {
}
)
// 第五步配置数据响应相关
service.interceptors.response.use(
response => {
// 获取数据
const res = response.data
// 判断请求是否出错了
if (res.code !== 200) {
Message({
message: res.data.item || 'error',
type: 'error',
duration: 5 * 1000
})
} else {
return res
}
},
// 其他服务器错误
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
2.2. 准备vuex 相关 在store 文件下新建文件modules 和文件getters.js。modules 是存取值文件 getters.js 是取值文件 他们之间的联系是通过index.js 文件里写的配置项
2.3. 文件配置项
// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 导入getters 文件
import getters from '@/store/getters'
Vue.use(Vuex)
// 获取modules 文件夹下面的文件名
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
上诉做完 准备阶段已经完成 接下来写 登录页面