🔥🔥🔥我的第一个vue3开源项目，欢迎大家积极参与（已完结）

👏👏👏欢迎来到白哥的第一个开源项目。为了让大家快的上手Vue3，并且运用到实战项目当中，我开源了这个项目。

本项目是基于vue2的项目重构，全面升级成Vu3的技术生态。

在这之前，我已经出了一系列关于vue3-admin的教学文章，教大家如何用Vu3从0-1搭建一个属于自己的后台管理系统。具体可以看看我的掘金专栏vue3后台管理系统教程。如果对你有帮助，不妨点赞+关注。

项目地址

考虑到国内访问Gihub的效率不是很高，我使用的Gitee

Gitee代码仓库地址：gitee.com/guigu-fe/lo… 本项目模版地址：gitee.com/guigu-fe/vu… 大家自取。

如果你没有Gitee的账户，请你注册一个，然后找我添加仓库权限。

项目说明

本项目之前是用vue2开发

在线预览地址：http://139.198.152.148/

账户密码找我

请大家不要修改权限管理里面的数据

具体效果如下： 现在要升级成为vue3的项目，本来我是想自己直接做完的。突然一想，为什么不让大家一起做呢（我偷个懒）？这样大家既可以熟悉Vue3，也可以参与实战项目。于是就有个开源的这个项目。 目前，项目所有的模块我已经搭建好了，大家要做的就是往每个模块添加具体的业务。页面效果如如下：

如何加入

如果你是vue的爱好者，如果你没有做过vue3项目的实战，请访问我的主页或者开源文档添加我。

大佬请绕行！！！

如何开发

请确保你已经联系我并且添加了代码仓库权限。

开发需求参考vue2项目页面。跟任务列表都是一一对应的。接口可以直接打开控制台查看。

1.起步

1. clone项目

git clone https://gitee.com/guigu-fe/logistics-admin-vue3.git

1. 安装依赖

pnpm install

注意：安装项目依赖需要使用pnpm，项目当中做了限制。

1. 运行项目

pnpm run dev

1. 预览项目

打开浏览器，访问http://127.0.0.1:3007/即可看到效果

2.领取任务

为了避免大家的任务冲突，我根据页面划分了任务列表，大家可以在任务列表中领取任务。 任务被领取以后，会进行更新。

3.提交任务

开发完自己领取的任务以后，你需要在Gitee上提交一个PR，然后找我review，合并代码。 提价PR具体看下图：

注意，不能直接在master开发，并且提交代码到远程仓库，master是不允许提交的。后面有代码规范，请详细查看。

代码规范

API规范

1 接口定义规范：

接口全部写在api目录下面，按照功能划分，分为不同的目录。 比如登录接口，定义在api/user/index.ts下面。

2 接口书写规范：

统一使用类方法，内部方法定义每个接口，最后统一export，接口使用到的类型全部定义在同级目录的types.ts文件中。比如搜索相关的接口：

import http from '@/utils/http'
import type { LoginData, UserRes } from './types'

/**
 * 登录
 */
export function login(data: LoginData) {
  return http.post<string>('/admin/acl/index/login', data)
}

3 接口类型定义：

/* 登录接口参数类型 */
export interface LoginData {
  username: string
  password: string
}

export interface UserRes {
  userId?: string
  name: string
  avatar: string
  buttons: string[]
  roles: string[]
  routes: string[]
}

4 接口引用 所有export的类接口方法都在api/index.ts中统一引入：

export { login } from './user'

在页面中使用：

<script>
  import { login } from "@/api"
  const handleLogin = async () => {
    try {
      const res = await login(ruleForm)
    } catch (error) {
      console.log(error)
    }
  }
</script>

Git规范

1.commit规范如下：

前缀	解释	示例
feat	新功能	feat: 添加新功能
fix	修复	fix: 修改bug
docs	文档变更	docs: 更新文档
style	代码样式变更	style: 修改样式
refactor	重构	refactor: 重构代码
perf	性能优化	perf: 优化了性能
test	增加测试	test: 单元测试
revert	回退	revert: 回退代码
build	打包	build: 打包代码
chore	构建过程或辅助工具的变动	chore: 修改构建｜

示例： feat: 添加数据子典模块

2.代码分支规范：

分支管理	命名规范	解释
master	master	稳定版本分支，上线完成回归后后，由项目技术负责人从 release 分支合并进来，并打 tag
feature	feature/功能名称
比如你领取的任务是数据字典，分支就可以命名为：feature/dict，具体可以看看路由name的名字	新功能开发使用分支，基于master建立
bug	bug/功能名称示例：bug/style	紧急线上bug修复使用分支，基于master建立

注意，在代码提交之前一定先pull主分支（master）的代码，然后merge到你的自己的分支，确保代码没有任何冲突，在提交到PR。

更多代码规范参考

开源贡献

参与开源贡献的人员，可以把自己的昵称和主页地址（任何自己想提高曝光的地址）发给我。我会在主页更新。

下面是参与人员：

• 【白哥学前端】
• 【code_Bo】

总结

目前，此次项目已经完结。