vue3.0+ts+bootstrap前端框架搭建

最新推荐文章于 2024-05-06 17:29:52 发布

winterKing93

最新推荐文章于 2024-05-06 17:29:52 发布

阅读量2.3k

点赞数 4

文章标签：前端框架 bootstrap vue-cli3 ts vue.js

本文链接：https://blog.csdn.net/wdd531006643/article/details/122208408

版权

1.win+r快捷键打开命令窗口。cmd进入

2.命令查看vue及node版本

3.命令切换路径到自己项目文件夹位置并创建vue项目

4.选择配置，上下键切换，回车键进入下一级，空格键选中（蓝色选中项）

这里直接回车就行

创建成功

5.使用开发工具打开vue项目（我这里使用的是webstorm）目录结构是这样的

6. 在开发软件终端使用npm命令引入vue的axios和store

7. 引入bootstrap需先引入jq

8.在main.js中引入jquery和bootstrap，页面显示（需修改.eslintrc.js文件）

9.创建配置文件vue.config.js配置jq引入及接口服务代理

10.封装axios，创建utils文件夹，创建request.ts文件

这里有引入会报错，需在 tsconfig.json文件中加入一行代码"noImplicitAny": false,即可

request.ts文件完整代码

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import storage from 'store';
import router from '@/router';
/**
 * http请求工具类
 *
 * 请求拦截器 负责将客户端标识tonpken值存储并放置在头部提交给服务端
 *
 * 响应拦截器 负责全局处理业务请求的网络或者业务错误
 */
// 创建axios的实例
const service = axios.create({
    baseURL:'/api',
    timeout: 10000 // 超时时间
});
// 请求拦截
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        const token = storage.get("ACCESS_TOKEN")
        if (token) {
            config.headers!.Authorization = `Bearer ${token}`
        }
        return config;
    },
    (err: any) => {
        Promise.reject(err);
    }
);
// 响应拦截
service.interceptors.response.use(
    (response: AxiosResponse) => {
        return response;
    },
    (err: any) => {
        let errMsg = '';
        if (err && err.response.status) {
            switch (err.response.status) {
                case 401:
                    errMsg = '登录状态失效，请重新登录';
                    router.push('/login');
                    break;
                case 403:
                    errMsg = '拒绝访问';
                    break;
                case 408:
                    errMsg = '请求超时';
                    break;
                case 500:
                    errMsg = '服务器内部错误';
                    break;
                case 501:
                    errMsg = '服务未实现';
                    break;
                case 502:
                    errMsg = '网关错误';
                    break;
                case 503:
                    errMsg = '服务不可用';
                    break;
                case 504:
                    errMsg = '网关超时';
                    break;
                case 505:
                    errMsg = 'HTTP版本不受支持';
                    break;
                default:
                    errMsg = err.response.data.msg;
                    break;
            }
        } else {
            errMsg = err;
        }
        console.log(errMsg)
        // Message.error(errMsg);
        return Promise.reject(errMsg);
    }
);
export default service;