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')