目录
在src目录下新建utils文件夹,新建文件“axios.js”
一、搭建vue项目
1、配置依赖环境
1>安装node.js
2>安装国内镜像
npm install -g cnpm --registry=http://registry.npm.taobao.org
3>安装vue-cli
cnpm install -g @vue/cli
2、搭建vue项目
然后创建vue项目,定位到创建项目的文件夹
提示 | 输入 | 说明 |
| vue init webpack vue-demo | 创建一个名称为“vue-demo”的vue项目 |
Target directory exists. Continue? (Y/n) | Y | 提示目标目录存在,是否要继续添加,输入Y |
Project name (vue-demo) | 默认和文件夹名字相同 | 输入项目名称---项目名称不能有大写字母,输入后回车 |
Project description (A Vue.js project) | 默认回车 | 输入项目描述---回车 |
Author | 默认回车 | 输入作者---回车 |
Vue build (Use arrow keys) | 回车 |
|
Install vue-router? (Y/n) Y | Y | 安装路由 |
Use ESLint to lint your code? (Y/n) | Y |
|
Pick an ESLint preset (Use arrow keys) | 回车 |
|
Set up unit tests (Y/n) | N | 单元测试 |
Setup e2e tests with Nightwatch? (Y/n) | N | e2e测试 |
Should we run `npm install` for you after the project has been created? | 回车 | vue脚手架工具自动下载依赖,构建项目 |
完整的创建过程
打开创建的vue项目
定位到创建项目的文件夹,我的是f盘下的vue-demo文件夹中的vue-demo文件夹中
运行指令:vue run dev
将提示给你的http地址输入到浏览器运行即可
二、添加依赖
添加vuex状态管理器
npm install vuex --save
在src目录下新建store.js文件,
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//设置数据状态
})
export default store;
引入vant等组件
vant官网:https://youzan.github.io/vant/#/zh-CN/home
引入
1、按需引入
npm i babel-plugin-import -D
2、手动按需引入
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
3、导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
element-ui官网:https://element.eleme.cn/#/zh-CN/component/installation
设置路由跳转
在src/router/index.js文件中设置路由跳转
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/view/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
]
})
在main.js文件中引入
1、在main.js文件中引入
import router from './router';
挂载到APP中
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
在vue文件中添加路由跳转
在方法中添加路由跳转
methods: {
// 跳转home页面
home() {
this.$router.push({
name: "Home",
});
},
},
引入封装好的请求拦截器
在src目录下新建utils文件夹,新建文件“axios.js”
import axios from 'axios' // 引用官方的axios库,用于我们创建自己封装的axios
import {
Notify
} from 'vant' //引用vant组件中的Toast 用于弹出提示框
import router from '../router/index' //引用router,用于在某些错误情况下跳转路由
//设置axios的基础url,用于标识项目的地址
// axios.defaults.baseURL = 'http://localhost:8090/attendance/'
/*
* request的请求拦截器:请求前的操作
*/
axios.interceptors.request.use(config => {
//调取登录token
config.headers.Authorization = localStorage.getItem("gotoken")
localStorage.getItem("gotoken") //store.getToken()
return config
}, error => {
Promise.reject(error)
})
/**
* response接收拦截器:接收后的操作
*/
//
axios.interceptors.response.use(response => {
// store.state.isShowLoading = false // 加载中动画关闭
//此处表示我们的请求让服务器正确的接收了,并且返回了数据(状态码 200)
//
return response
}, error => {
//此处表示服务器没有正确的处理我们的请求,然后给我们返回了错误的数据信息
//status 表示 错误的http状态码
if (!error.response) {
// Notify({ type: 'warning', duration: 1000, message: '服务器出现问题,请稍后重试!' });
// router.push({ name: 'login' });
}
const status = error.response.status
console.log(status);
switch (status) { // 其他情况补充处理
case 500:
Notify({
type: 'warning',
duration: 1000,
message: '服务器响应出现问题,请稍后重试!'
});
break;
case 400:
Notify({
type: 'warning',
duration: 1000,
message: '服务器无法理解请求参数,请稍后重试!'
});
break;
case 401:
Notify({
type: 'warning',
duration: 1000,
message: '访问资源未授权,请登陆后重试!'
});
router.push({
name: 'login'
});
break;
case 403:
Notify({
type: 'warning',
duration: 1000,
message: '请求资源暂时不可用,请登陆后重试!'
});
router.push({
name: 'login'
});
break;
case 404:
Notify({
type: 'warning',
duration: 1000,
message: '请求资源暂不存在,请稍后重试!'
});
break;
}
return Promise.reject(error)
})
export default axios
在main.js文件中引入
import axios from '../src/utils/axios' // 引入axios请求拦截器
Vue.prototype.$axios = axios // 全局挂载axios
发送请求
get请求
this.$axios.get(url).then((res) => {}
post请求
this.$axios.post(url).then((res) => {}
完整的main.js文件
import Vue from 'vue'
import Vuex from 'vuex'
/***************************************vant组件引入:****************************/
import Vant from 'vant' // 引入vant组件库
import 'vant/lib/index.css' // 引入vant样式
import touch from 'vue-directive-touch' // 滑动:长按,左右划等
/***************************************本地组件或者样式引入:****************************/
import App from './App'
import router from '../src/router/index'
import store from './store'
import axios from '../src/utils/dynamicAxios' // 引入axios请求拦截器
import "lib-flexible"; // 引入 flexible用于适配不同屏幕移动端显示
// 引入echarts
import echarts from 'echarts'
// vue页面组件使用:
Vue.use(Vuex)
Vue.use(store)
Vue.use(Vant)
Vue.use(touch)
// vue页面属性使用:
Vue.config.productionTip = false
/***************全局挂载:******************/
Vue.prototype.$axios = axios // 全局挂载axios
Vue.prototype.$echarts = echarts // 全局挂载echarts图表组件
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app')