1.下载less或sass（如果使用的话）

        pnpm i -D less   |   pnpm i -D sass     （-D: 这是一个选项或标志，表示安装的软件包将被添加为开发依赖项（devDependencies）。开发依赖项是指在开发过程中需要使用的工具、库或插件，而不是在生产环境中运行的必需组件。）

2.下载axios

        pnpm i axios

import axios from 'axios'
const request = axios.create({baseURL: '', // 设置请求的基础地址,基础路径timeout: 5000 //超时的时间设置
})

3.element-plus

//在main.ts的配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

4.下载vue-router

        pnpm i vue-router@latest

//新建的文件
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [{path: '/login',component: () => import('@/views/login/login.vue'),name: 'login',meta: {title: "登录",hidden: true,icon:'House',}}],//滚动行为,scrollBehavior() {return {top: 0,left: 0}}
})
//对外暴露
export default router

//main.ts
import { createApp } from 'vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

5.下载pinia

        pnpm install pinia

//新建的文件
import {createPinia} from 'pinia'
//此为大仓库
let pinia = createPinia();
export default pinia; //main.ts
import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

6.mock

        pnpm i mockjs vite-plugin-mock@latest  -D

//vite.config.ts
import { defineConfig,ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入mock接口 
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/export default  defineConfig(({ command }: ConfigEnv) => {return {plugins: [vue(),viteMockServe({mockPath: 'mock',localEnabled: command === 'serve',}),],}
})

//使用
function createUserList() {return [{username: 'fengfeng',password: '111111',token: 'My Token',}]
}
export default [{url: 'user/login',method: 'post',response: ({ body }) => {//获取请求体携带的用户密码const { username, password } = body;const checkUser = createUserList().find(el => el.username == username && el.password == password)//如果没有用户返回失败的信息if(!checkUser){return { code:200,data:{message:'账号或密码错误'} }}//存在该用户者返回成功信息const {token} = checkUserreturn {code:200,data:{token}}}}
]

7.下载element-plus 图标库

        pnpm install @element-plus/icons-vue

//main.ts 
//设置为全局组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}