vue下载插件

m0_67244960

已于 2025-03-03 11:32:58 修改

阅读量456

点赞数 5

分类专栏： Java基础文章标签： maven java

于 2025-03-03 10:37:26 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67244960/article/details/145978402

版权

Java基础专栏收录该内容

36 篇文章

订阅专栏

1.下载路由组件

 npm i vue-router

2.创建router文件夹

3.创建router.js文件

import {createRouter, createWebHistory} from "vue-router"


let router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            component: () => import("../components/StudyTable.vue")
        }

    ]
})
export default router;

4.主文件中配置路由

import {createApp} from 'vue'
import App from './App.vue'
import router from './router/router.js'
let app = createApp(App);
app.use(router);
app.mount('#app')

5.下载element-plus

 npm install element-plus --save

6.注册组件

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
let app = createApp(App);
app.use(router);
app.use(ElementPlus);

7.使用饿了么组件

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

8.展示效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

9.axios使用封装流程

下载axios

npm i axios

封装axios

import axios from 'axios';

// 创建一个 Axios 实例
const apiClient = axios.create({
    baseURL: 'http://localhost:8083', // 设置你的API基础URL
    timeout: 5000, // 根据需要调整超时时间
    headers: {
        'Content-Type': 'application/json',
    },
});

// 定义通用的请求方法
export function request({ method, url, data = null }) {
    return apiClient({
        method,
        url,
        data
    }).then(response => response.data)
        .catch(error => {
            console.error(`There was an error with the ${method.toUpperCase()} request to ${url}:`, error);
            throw error;
        });
}

// 定义具体的请求函数
export function get(url) {
    return request({ method: 'get', url });
}

export function post(url, data) {
    return request({ method: 'post', url, data });
}

export function put(url, data) {
    return request({ method: 'put', url, data });
}

export function deleteRequest(url) {
    return request({ method: 'delete', url });
}