VSCode学习记录

一、下载相关包

npm install

npm install vue-router //路由

npm install axios

npm install element-plus --save //组件

二、构建一个简单的项目

1.创建router文件夹，在里面创建一个index.js文件用来管理不同页面的路由

import {createRouter,createWebHashHistory} from  'vue-router'

const router=createRouter(
    {
    history:createWebHashHistory(),
    routes:[
        {path:'/easy',component:()=>import("../views/easy.vue"),
        children:[{path:'/stafflist',component:()=>import("../views/stafflist.vue")}]
    }
    ]
    }
);
export default router;

2.设置main.js文件，使用配置的router和ElementPlus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

3.创建util文件夹，在里面创建http.js文件

import axios from 'axios';

export default function (options) {
    //配置每次发送请求都从sessionStorage中获取名字叫token的数据,
    //添加到请求头部的Authorization属性中

    //Object.assign用于合并对象的数据
    options.headers = Object.assign(
        { Authorization: sessionStorage.getItem('token') },
        options.headers || {}
    );
    //axios()   返回一个promise对象，用于异步请求
    //options是一个对象，其中包含了许多用于配置请求的参数，
    //例如请求的url、请求方法（GET、POST等）、请求头等
    return axios(options)
        .then(({ status, data, statusText }) => {
            //该函数在请求成功并返回数据时被调用
            //status：HTTP状态码，例如200表示请求成功。
            //data：服务器返回的数据。
            // statusText：HTTP状态文本，例如"OK"表示请求成功。
            console.log(data);
            if (status == 200) {
                return data;
            } else {
                throw new Error(statusText);
            }
        })
        .catch(e=>{
            return Promise.reject(e);
            //return Promise.reject(e.message);
        });
}

4.创建api文件夹，在里面创建index.js文件，用来通过在get方法中输入地址就能获取改地址的页面

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

5.创建代理，在vite.config.js文件中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    // 配置vite冷启动项目自动使用浏览器访问首页
    open:true,
    proxy: {  
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

在地址输入/api就相当于'http://localhost:8080'，以后修改比较方便

6.创建views文件夹，在里面写我们需要的页面

（1）创建一个easy.vue文件

<script setup>

</script>
<template>
    <div class="common-layout">
        <el-container>
        <el-header>Header</el-header>
        <el-container>
        <el-aside width="200px"><el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router="true"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1" route="stafflist">员工列表</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu></el-aside>
        <el-main><router-view></router-view></el-main>
        </el-container>
    </el-container>
    </div>
</template>
<style>

</style>

里面包含一个容器，在容器的左侧有一个表格，我们只设置了第一个名字为员工列表，在里面设置route属性用来跳转到当前页面

（2）创建stafflist.vue文件

<script setup>
import {ref,onMounted} from 'vue'
import easyapi from '../api'
//定义绑定的数据
const tableData=ref([]);
//挂载页面时查询数据
onMounted(async function(){
    let result=await easyapi.get("/api/staff");
    tableData.value=result.data;
});
</script>
    <template>
 <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
    
  </el-table>
</template>
<style>
</style>

首先获取数据，存在tableData中，然后通过表格展示出来。

由于我们在router文件夹中的index.js文件中设置了Stafflist的路由，所以在easy页面点击route属性为stafflist的表格时，将会自动获取路由信息，从而跳转到对应的页面。

因为是部分的页面发生改变，所以路由要在总页面的里面用children编写。