unilife/Front/前端环境.md

[TOC]
# 配置前端环境
---

### 检查node版本
``` 
npm -v
10.9.2
```
### 安装Vite
```
npm create vite@latest my-vue-app
```
此时vite会提示你选择
1️⃣Select a framework 👉 选择 Vue
2️⃣ Select a variant 👉 选择 TypeScript

然后安装pnpm
```
npm install -g pnpm
```
检查是否安装成功
```
pnpm -v
```

进入项目(项目我已经建好了,上传到项目里了)
```
cd Front/unilife
```

### 安装Axios
``` cmd
pnpm add axios
```
用来连接前后端

### 安装veeValidate
```cmd
pnpm add vee-validate
pnpm install yup
```
用于表单验证

### 安装ElementPlus
```cmd
pnpm add element-plus
```
组件

### 安装VueRouter
```cmd
pnpm i vue-router
pnpm add vue-router@4
```
用来完成界面跳转，同时完成vuerouter与ts的适配



### 安装elementplus的icon库
```
pnpm install @element-plus/icons-vue
```

### 安装scss依赖

```cmd
pnpm add -D sass-embedded
```

### 适配Markdown
```
pnpm add marked highlight.js
```

### 安装DOMPurify
信任Markdown解析
```
pnpm add dompurify
```

### 安装msw（模拟后端）
```
pnpm add msw -D
```