用vite建立vue3+ts项目

用vite建立vue3+ts项目

npm create vite@latest your_project_name --template vue-ts

在src文件下建立文件env.d.ts，防止报文件路径错误

declare module '*.vue' {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}

下载vue-router，axios，element-plus

npm install vue-router
npm install axios
npm install element-plus

在src下建立router文件夹并建立文件index.ts，同时建立views目录存放页面文件，index.ts内容如下：

import { createRouter, createWebHistory,  } from 'vue-router'
export const routes = [
    {path: '/', redirect:'/login'},
    {path: '/login', component: () => import('../views/login.vue')},
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

在main.ts中引入相关插件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入vue-router
import router from "./router/index.ts";
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from "element-plus/es/locale/lang/zh-cn";
// 引入element-plus中文包
const app = createApp(App)
app.use(router).use(ElementPlus,{locale:zhCn})
app.mount('#app')

在文件中使用axios再导入使用

import axios from 'axios'
axios.get('/api/param').then(res=>){}.catch(reason=>{})
axios.post('api',formData).then(res=>){}.catch(reason=>{})

在``src下建立utils目录，建立request.ts`文件，封装网络请求

import axios from "axios";
import {ElMessage} from "element-plus";

// 创建 Axios 请求实例
const request = axios.create({
    baseURL: 'http://10.96.x.x:8000/',
    // baseURL: 'http://127.0.0.1:8000/',
    // 最大响应时间20S
    timeout: 20000,
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 将成功返回的后端信息拆解出来
    let data = response.data
    // 判断后端返回是否成功
    if (data['code'] != 200) {
        ElMessage.error(data['msg'])
    }
    return data['data'];
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default request

//配置好后启动服务器
npm run dev