首选需要node环境。你可以参考：如何创建一个vue的新项目，用命令行的方式创建.下载node.js-CSDN博客

所需要的内容官网：

https://vitejs.dev/

安装 | Element Plus

Vue Router | Vue.js 的官方路由

axios中文网|axios API 中文文档 | axios

• 下载最新的vite ：

npm create vite@latest

然后写个项目名称， 项目框架，语言我选的ts

 

 然后跳转到我们的项目中，下载依赖。npm install。

 

•  安装配置 Element Plus

• npm install element-plus --save

 在main.js里面引入element-plus

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

 Element plus 中，Icon 需要单独配置：

npm install @element-plus/icons

在main.js里面配置

import * as ElIcon from '@element-plus/icons-vue'

Object.keys(ElIcon).forEach((key) => {

app.component(key, ElIcon[key])

• 配置路由，使用vue-router

npm install vue-router --save

 在src 文件夹下新建 router 文件夹，然后新建 index.js

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw,_RouteRecordBase } from 'vue-router'
import Layout from '@/layout/index.vue'/*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/export const constantRoutes:RouteRecordRaw[] = [{path: '/login',component: () => import('@/views/login/index.vue'),meta: {title: '用户登录', hidden: true},},{path: '/404',component: () => import('@/views/error-page/404.vue'),hidden: true},{path: '/401',component: () => import('@/views/error-page/401.vue'),hidden: true},{path: '/redirect',component: Layout,meta: { hidden: true },children: [{path: '/redirect/:path(.*)',component: () => import('@/views/redirect/index.vue')}]},{path: '/',component: Layout,redirect: '/home',children: [{path: 'home',component: () => import ("@/views/home/index.vue"),name: 'Home',meta: { title: 'Dashboard', icon: 'HomeFilled', affix: true }}]},
]/*** asyncRoutes* the routes that need to be dynamically loaded based on user roles*/
export const asyncRoutes:RouteRecordRaw[] = [// 404 page must be placed at the end !!!{ path: '/:pathMatch(.*)', redirect: '/404', hidden: true }
]const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [...constantRoutes,...asyncRoutes]
})export const addRoutes = (routes:RouteRecordRaw[]) => {for(let i = 0; i < routes.length; i++) {router.addRoute(routes[i])}
}export default router

在main.js里面引入

import router from './router'
app.use(router)

• .安装配置 Axios

npm i axios -- save

在 src 文件夹下新建 utils 文件夹，在 utils 文件夹下新建 http 文件夹，然后 新建 axios.js 和 http.js。

1. axios.js：主要用来创建 axios 实例、拦截请求和响应。
2. http.js：主要用来封装各种请求。
3. 

 

 在 vite.config.js 配置跨域：