From f2d09229c2c31629abae3ba4adf1be78e02e4452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Mon, 14 Mar 2022 23:44:51 +0800 Subject: [PATCH] =?UTF-8?q?docs(README.md):=20=E9=A1=B9=E7=9B=AE=E8=AF=B4?= =?UTF-8?q?=E6=98=8E=E6=96=87=E6=A1=A3=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 146 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 114 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 14fe0852..d95368c5 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,131 @@ -[![](https://img.shields.io/badge/Author-有来开源组织-orange.svg)](https://gitee.com/wangjiabin-x/uh5) -![](https://img.shields.io/badge/youlai--mall-v2.0.0-blue) -[![](https://img.shields.io/github/stars/hxrui/youlai-mall.svg?style=social&label=Stars)](https://github.com/hxrui/youlai-mall/stargazers) -[![](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg)](https://github.com/hxrui/youlai-mall/blob/master/LICENSE) -![](https://img.shields.io/badge/SpringBoot-2.6.3-brightgreen.svg) -![](https://img.shields.io/badge/SpringCloud-2021-green.svg) -![](https://img.shields.io/badge/vue3--element--admin-v1.0.0-orange) +

+ + + + + + + + +
+ + + + +

+

+在线预览：www.youlai.tech +

-**线上预览地址：** http://www.youlai.tech +## 项目介绍 -#### 项目预览 +[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 Vue3 版本后台管理前端解决方案；使用前端主流技术栈 Vue3 + Vite2 + TypeScript + Vue Router + Pinia + Volar + Element Plus 等；实现功能包括不限于动态权限路由、按钮权限控制、国际化、主题大小切换等；基于此模板开发了有来商城管理系统，也是有来开源组织的另一项开源力作。 -| ![image-20210621004954228](https://gitee.com/haoxr/image/raw/master/image-20210621004954228.png) | ![image-20210621005011310](https://gitee.com/haoxr/image/raw/master/image-20210621005011310.png) | -| ------------------------------------------------------------ | ------------------------------------------------------------ | +## 项目优势 + +- 基于 vue-element-admin 升级的Vue3版本 ，极易上手，减少学习成本； +- 一套完整适配的微服务权限系统线上接口，企业级真实前后端接入场景，非Mock数据； +- 功能全面：国际化、动态路由、按钮权限、主题大小切换、Echart、wangEditor； +- TypeScript 全面支持，包括组件和API调用层面； +- 主流 Vue3 生态和前端技术栈，常用组件极简封装； +- 从0到1的项目文档支持； +- 全栈技术支持: 微服务接口、Vue3管理前端、uni-app移动端和K8S持续集成交付； + + +## 技术栈 + + +| 技术栈 | 描述 | 官网 | +| ---- | ---- | ---- | +| Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ | +| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ +| Vite2 | 前端开发与构建工具 | https://cn.vitejs.dev/ | +| Element Plus | 基于 Vue 3，面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/| +| Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ +| Vue Router | Vue.js 的官方路由 |https://router.vuejs.org/zh/ + + + +## 项目预览 + +在线预览地址: [www.youlai.tech](http://www.youlai.tech) + +| ![](https://gitee.com/haoxr/image/raw/master/default/20220314232531.png) | ![image-20210621005011310](https://gitee.com/haoxr/image/raw/master/image-20210621005011310.png) | +| ----| ----| |![](https://gitee.com/haoxr/image/raw/master/30719657a4b183428a2472231fee55a6_image-20210621005037964.png) | ![image-20210621005123432](https://gitee.com/haoxr/image/raw/master/image-20210621005123432.png) | -#### 技术栈 -- **前端技术栈：** vue3、vite2、element-plus、typescript、vue-element-admin +## 项目地址 + +| |Gitee| Github| GitCode | +| ---- | ----| ---- | ---- | +| 开源组织 | [有来开源组织](https://gitee.com/youlaiorg) | [有来开源组织](https://github.com/youlaitech) | [有来开源组织](https://gitcode.net/youlai) | +| 后端 | [youlai-mall](https://gitee.com/youlaiorg/youlai-mall)| [youlai-mall](https://github.com/youlaitech/youlai-mall) | [youlai-mall](https://gitcode.net/youlai/youlai-mall) | +| 管理前端 | [mall-admin-web](https://gitee.com/youlaiorg/mall-admin-web) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web) | [mall-admin-web](https://gitcode.net/youlai/mall-admin-web) | +| 小程序/H5/移动端 | [mall-app](https://gitee.com/youlaiorg/mall-app)| [mall-app](https://github.com/youlaitech/mall-app) | [mall-app](https://gitcode.net/youlai/mall-app) | -#### 项目地址 +## 项目启动和部署 -| 项目名称 | 源码地址 |项目名称 | 源码地址 | -| ---------- | ------------------------------------------------------------ |---------- | ------------------------------------------------------------ | -| 微服务后台 | [youlai-mall](https://gitee.com/youlaitech/youlai-mall) | 微信小程序 | [youlai-mall-weapp](https://gitee.com/youlaitech/youlai-mall-weapp) | -| 管理前端 | [youlai-mall-admin](https://gitee.com/youlaitech/youlai-mall-admin) |APP应用 | [youlai-mall-app](https://gitee.com/youlaitech/youlai-mall-app) | +### 环境准备 + +- 安装 Node + + 版本：v14 或 v16 + +- 开发工具 + + 推荐 VSCode + +- 必装插件 + + VSCode 插件市场搜索并安装 Volor, 且一定要禁用 Vetur，不然代码会出现组件使用了但编译器还报组件未使用的警告信息，另外尤大也在Vue3生态话题说过 Volar 将会替代 Vetur 作为 Vue 的官方插件。 + +### 项目启动 + + >🚨 如果前端开发人员或者本地没有启动后台服务的情况，需要修改 vite.config.ts 的代理地址 http://localhost:9999 为线上接口地址 http://www.youlai.tech:9999 + +1. npm install +2. npm run dev +3. 浏览器访问 http://localhost:9527 -#### 项目启动 +### 项目部署 + +- 本地打包 -1. 本机安装Node环境 -2. npm install -3. npm run dev -4. 访问 http://localhost:9527 + ``` + npm run build:prod + ``` + 生成的静态文件位于项目根目录 dist 文件夹下 -#### 项目文档 +- nginx.cofig 配置 -[项目文档地址](https://www.cnblogs.com/haoxianrui/) + ``` + server { + listen 80; + server_name localhost; + + location / { + root /usr/share/nginx/html/web; + index index.html index.htm; + } + + # 代理转发请求至网关，prod-api标识解决跨域问题 + location /prod-api/ { + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_pass http://www.youlai.tech:9999/; + } + } + + ``` + +## 联系信息 + +> 欢迎添加开发者微信，备注「有来」进群 -#### 联系信息 -因为微信交流群满200人只能通过邀请进入，如果想进入交流群学习可添加以下开发人员，备注“**有来**“由其拉进群。 - - -| ![](https://gitee.com/haoxr/image/raw/master/default/113__6c5ed5b1b73ea9cd4cf32848ed350c07_b9b214638a2a406e52dbf51e9bf9a2ef.png) | ![](https://gitee.com/haoxr/image/raw/master/hxr.jpg) | ![](https://gitee.com/haoxr/image/raw/master/default/20210701234946.png) | ![](https://gitee.com/haoxr/image/raw/master/default/image-20210702002909113.png) | -| ------------------------------------------------------------ | ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | - +| ![](https://gitee.com/haoxr/image/raw/master/hxr.jpg) | ![](https://gitee.com/haoxr/image/raw/master/default/ba695a5e70410a066b7052c5dc9db5c.jpg) | +| ----------------------------------------------------- | ------------------------------------------------------------ | \ No newline at end of file