首选需要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 配置跨域：