使用 vite+typescript+组合式开发+element plus后台管理系统

准备：创建vue3项目

        1）.和创建vue2项目一样，不过要选择vue3版本
    
        2）.条件：已安装 16.0 或更高版本的 Node.js（命令窗口npm init vue@latest）

            创建选项：a）.Add TypeScript? yes
                b).Add JSX Support? no
                c).Add Vue Router for Single Page Application development? yes
                d).Add Pinia for state management? yes
                e).Add Vitest for Unit testing? no
                f).Add Cypress for both Unit and End-to-End testing? no
                g).Add ESLint for code quality? yes
                h).Add Prettier for code formatting? yes    
                Project name:项目的名称

               3）.安装axios（ npm install --save axios vue-axios） 在main.js引入
                        import axios from 'axios'
                        import VueAxios from 'vue-axios'//模块化

                        Vue.use(VueAxios, axios)

                4).安装element-ui(命令npm i element-ui -S)

                        在main.ts引入

                        import ElementUI from 'element-ui';

                        import 'element-ui/lib/theme-chalk/index.css';

                        Vue.use(ElementUI);

                        

登录页面

1.首先在src文件夹下创建untils文件夹在此文件夹创建http.ts（请求封装）

import axios from "axios";//引入axios
const instance = axios.create({
    baseURL: '/',
    withCredentials: true,
});
instance.defaults.headers.post['Content-Type'] = 'application/json';
//暴露 get 和 post 函数
function get(url: string, params?: object) {
    return instance.get(url, { params })
}
function post(url: string, data: object) {
    return instance.post(url, data)
}
export { get, post }

2.在src文件夹创建api文件夹，在此文件夹创建login.ts文件（接口封装）

import {get,post} from '@/untils/http'

// 登录页面

const login=(params:object)=>get('/admin/User/Login',params)

3.在AboutView.vue页面写入登录页面

<template>
  <div id="box">
    <el-card class="box-card">
      <template #header>
        <div>
          <span>管理员登录</span>
        <