该项目为前后端分离项目的前端部分，后端项目mypages地址：点我试试？ 。
mypages-web是一个聚合多社交平台主页的前端项目，基于 Vue 3 + ElementPlus 实现。
主要为用户提供可在首页自定义添加社交平台、关注用户、观点看法的业务功能，支持检查用户内容更新及同步用户昵称、签名和头像等功能。
mypages-web -- 项目目录
├── mock -- 模拟后台数据
│ ├── demo -- 样例
│ ├── json -- 数据
│ ├── modules -- 功能模块
│ ├── index.js -- 主配置
│ └── util.js -- 配置工具
├── public -- 公共资源，浏览器地址栏可访问
│ ├── css
│ ├── images
│ ├── json
│ ├── favicon.ico
│ └── index.html
├── src -- 项目资源目录
│ ├── api -- 后台接口目录
│ ├── assets -- 项目内资源目录
│ ├── components -- 组件目录
│ ├── minxins
│ ├── router -- 路由配置
│ ├── store -- 全局状态（变量）存储
│ ├── utils -- 工具类
│ ├── views -- 视图目录
│ ├── App.vue -- 主入口
│ └── main.js -- 主配置
├── .browserslistrc
├── .env -- 在所有的环境中被载入，及全局公共配置
├── .env.development -- 开发环境配置
├── .env.local -- 在所有的环境中被载入，但会被 git 忽略，可注释为不忽略
├── .env.production -- 生产环境配置
├── .eslintrc.js
├── babel.config.js
├── Dockerfile -- 构建 docker 镜像的文件
├── LICENSE -- 开源协议文件
├── nginx.conf -- nginx 配置文件
├── package-lock.json
├── package.json -- vue 打包配置
├── README.md
└── vue.config.js -- vue 全局配置文件
在线体验地址：https://www.m1yellow.cn/mypages
效果预览图：
| 技术 | 说明 | 官网 |
|---|---|---|
| Node.js | 前端环境 | https://nodejs.org/ |
| Vue | 前端框架 | https://vuejs.org/ |
| Vuex | 全局状态框架 | https://vuex.vuejs.org/ |
| Vue-router | 路由框架 | https://router.vuejs.org/ |
| ElementPlus | 前端UI框架 | https://element-plus.gitee.io/ |
| Axios | 前端HTTP框架 | https://github.com/axios/axios |
| Js-cookie | Cookie管理工具 | https://github.com/js-cookie/js-cookie |
- 安装 Node.js 环境
- 克隆项目到本地后，IDEA/VSCode 选择项目文件夹打开
- 项目根目录（注意不是磁盘根目录）下的
.env.*文件为各个环境的配置文件，接口地址需自行修改 - 命令行执行
npm install，下载项目依赖 - 命令行执行
npm run dev，以开发环境运行项目，需要访问后端项目接口 - 命令行执行
npm run local，以本地环境运行项目，直接加载本地图片和 json 数据 - 命令行执行
npm run build，项目构建打包到项目根目录下的mypages-web文件夹 - Nginx/Tomcat 部署
mypages-web，具体配置细节可以自行搜索Vue项目部署相关博客资料