使用Vite构建项目 安装axios,element-plus,vue-router等配置及_vite axios

1.安装Vite 

npm init vite@latest

2.创建项目

输入项目名称

3.安装router

npm install vue-router --save
 
 
 
 
import { createRouter,createWebHashHistory} from 'vue-router';
import Login from '../views/login/login.vue';
 const  routes=[
    {
        path:'/',
        redirect:"/Login"
    },
       {
        path: '/Login',
        name: 'Login',
        component: Login
    }
    ]
const router = createRouter({
    routes,
    history: createWebHashHistory(),
   // history: createWebHistory()
})
router.beforeEach((to, from, next) => {
    if (to.path === "/login" || to.path === "/") {
        next();
    } else {
        let login_sucess = localStorage.getItem('login_sucess');
        if (login_sucess === null || login_sucess === '') {
            ElMessageBox.alert("请重新登录", "title", {
                confirmButtonText: "OK",
                callback: (action: any) => {
                    next('/login');
                },
            })
        } else {
            next();
        }
    }
});
export default router;

4.安装axios

npm install axios -g
 
npm install qs
然后在 vite-env.d.ts 文件中导入
declare module 'qs'
 
封装
import axios from 'axios';
import qs from 'qs';
import { ElMessageBox } from "element-plus";
import router from "../router/index"
const BASEURL ='url';
const service = axios.create({
    timeout: 5000,
    baseURL: BASEURL,
})
// http request 拦截器
service.interceptors.request.use(config => {
    // 0. 过滤获取token的请求
    if (config.url === '/api/login/get_verification') {
        return config
    }
    // 获取 token 和 sk
    let token = localStorage.getItem('token') || '';
    let sk = localStorage.getItem('sk') || '';
    // 1. 获取请求参数 row
    // let data = config.data;
 
    //  let row = data.row 
    let data = config?.data || (config['data'] = []);
    let row = data?.row || (config['data']['row'] = []);
    config.data = qs.stringify(data)
    return config
}, err => {
    return err
})
service.interceptors.response.use(response => {
    //接收返回数据..
    const res = response.data
    const { code, msg } = response.data
    if (code === 0) {
        showMessage(res, 'success')
        return res
    }
    else if (code === -3) {
        showMessage(res, 'error')
        return res
        // 抛出异常
    }
    else if (code === -9998) {   // token认证失败
        showMessageLOGIN(res)
        return Promise.reject(msg)  // 抛出异常
    } else {
        showMessage(res, 'error')
        return Promise.reject(msg || '服务器异常')
    }
}, err => {
    return err;
})
//封装错误提示信息..
function showMessage(res: any, types: string) {
    if (types == 'error') {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    } else {
        ElMessage({
            message: res.msg,
            type: 'success',
        })
    }
 
    // ElMessageBox.alert(res.msg, "舜泰汽车", {
    //     confirmButtonText: "OK",
    // })
}
function showMessageLOGIN(res: any) {
    ElMessageBox.alert(res.msg, "舜泰汽车", {
        confirmButtonText: "OK",
        callback: (action: any) => {
            setTimeout(() => {
                router.push('/login')
            }, 15000)
        },
    })
}
export default service;
 
调用
 
import service from "../../request/index"
export function get_data(vin) {
    return service({
        url: "/api/api/get_data",
        method: 'POST',
        data: {
            row: {
                vin:vin,
            }
        }
    
    })
}

5.安装element-plus

npm install element-plus --save

6.安装pinina

npm i pinia
 
import { defineStore } from 'pinia' //引入pinia
 
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCounter = defineStore('counter',{
	state: () => {
        return {
			person: {
				name: 'pinia',
				age: 0,
				say: 'woc'
			},
			reason: '我爱前端',
		}
	},
	getters:{
		doubleCounter(state){
			return state.reason="aaa"
		}
	},
    actions:{
		increment(){
			this.person.age++
		},
		//传参
		incrementnum(num){
			this.person.age += num
		}
	}
})
 
 
调用
 
import { useCounter } from '@/store';
const store = useCounter ();

7.main.ts文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale  from "element-plus/lib/locale/lang/zh-cn"
 
import { createPinia } from 'pinia'
createApp(App).use(router).use(ElementPlus,{locale}).use(createPinia()).mount('#app')