vue3.0项目环境搭建(简易版)

vue环境搭建(简易版)


? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version  // 是否选择vue版本
 (*) Babel	// 是否安装bable
 (*) TypeScript  // 是否安装近几年流行的ts
 ( ) Progressive Web App (PWA) Support  // 渐进式web应用
 (*) Router  // 是否自动配置路由
 (*) Vuex  // 是否安装vuex
 (*) CSS Pre-processors  // 是否安装css预编译期,例如sass、less
 (*) Linter / Formatter  // 是否安装eslint代码校验
>( ) Unit Testing  // 测试
 ( ) E2E Testing   // 测试

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
配置项目结构目录
在这里插入图片描述
配置axios

cnpm install axios

request.js封装axios拦截器、适配器

import axios from 'axios';
import store from '@/store';
axios.defaults.timeout = 8000;
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

// 添加请求拦截器
axios.interceptors.request.use(
	(config) => {
		// let token = getApp().globalData.token;
    let token = store.state.token;
		config.headers['Authorization'] = token;
		config.headers['Content-type'] = 'application/json';
		return config;
	}, err => {
		return err;
	}
);

// 添加响应拦截器
axios.interceptors.response.use(
	(response) => {
		console.log('来到了response拦截success中');
		return response.data;
	},
	(err) => {
		console.log('来到了response拦截failure中');
		if (err && err.response) {
			switch (err.response.status) {
				case 400:
					err.message = '参数错误(400)';
					break;
				case 401:
					err.message = '未授权访问(401)';
					break;
				case 403:
					err.message = '权限错误(403)';
					break;
				case 404:
					err.message = '访问资源错误(404)';
					break;
				case 500:
					err.message = '服务器错误(500)';
					break;
      }
		} else if (err.response.status < 200 || err.response.status > 300) {
			err.message = '请求失败';
		}
		return Promise.reject(err);
	}
);

axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		console.log(config);
		var settle = require('axios/lib/core/settle');
		var buildURL = require('axios/lib/helpers/buildURL');
		uni.request({
			method: config.method.toUpperCase(),
			url: buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			}
		});
	});
};

export default axios;

封装api接口

import axios from '../../utils/request.js';

// get 请求
export function getUsers(params) {
    return axios.get('/users', {
        params: params,
    })
}

// post 请求
export function addUsers(params) {
    return axios.post('/api/users', params)
}

// put 请求
export function editGroup(params) {
    return Axios.put('/api/users', params)
}

// 删除分组
export function deleteGroup(params) {
    return Axios.delete(baseUrl + '/api/dept', params)
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值