首选需要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。
axios.js：主要用来创建 axios 实例、拦截请求和响应。http.js：主要用来封装各种请求。
在 vite.config.js 配置跨域：
