# erabbit-client-pc

**Repository Path**: chen_longjia/erabbit-client-pc

## Basic Information

- **Project Name**: erabbit-client-pc
- **Description**: 基于vue3的项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2021-12-18
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# erabbit-client-pc

## Project setup

## 主要模块

### 1.登录模块

#### 登录模块主要涉及账号密码登录/手机号登录/QQ登录

1.QQ登录需要对接三方SDK(QQ互联),首先需要申请appid跟appkey,然后在登录时会出现跳转域名跟本地域名不一致,无法回调页面,则需要修改本地host地址
修改目录:C/windows/system32/drivers/etc/hosts(windows系统),将127.0.0.1指向回调线上页面
2.需要开启IP或域名访问webpack服务器权限,在vue.config.js中
```
chainWebpack.config=>{
    config.devServer.disableHostCheck(true)
}
```
3.处理QQ登录按钮,在index.html下添加如下代码:

```
 <script src="http://connect.qq.com/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.corho.com:8080/#/login/callback"></script>
```
4.鉴于QC不需要webpack做打包,此时可以配置外部扩展,那么该模块将不会被打包
```
configureWebpack:{
    externals:{
        qc:"QC"
    }
}

5.处理登录按钮
```html
 <a href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
    <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt=""/>
 </a>
``` 
### 2.购物车模块

### 4.订单模块

### 3.个人中心模块

```

因为考虑到复用性,项目中所涉及的组件,我对此做了封装

1.对话框组件(可设置标题,动态插入内容,动态插入底部操作按钮,打开关闭功能)

2.弹框提示组件

``` 
## 使用说明:

```
通过git clone 从远程仓库拉取下代码后,首先需要通过下面的命令下载项目所需要的依赖
```
npm install 或者 npm i
```

下载完成依赖后,项目启动
```
npm run serve
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).