# vue-multip-page

**Repository Path**: giser168/vue-multip-page

## Basic Information

- **Project Name**: vue-multip-page
- **Description**: vue多页面配置项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-01-08
- **Last Updated**: 2025-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-multi-page
活动页h5多页面配置，并结合`jenkins`和`nginx`实现，每次增加一个页面，只需要在`jenkins`的动态参数中增加一个参数

[具体详情可阅读说明文章](https://juejin.im/post/6869244807844364295)

## 使用说明
### 在pages下建立自己的页面
输入命令
```
  npm run new:page
```

### 项目启动和打包
```
npm install
```

```
npm run serve --page=pages/xxx
```

```
npm run build --page=pages/xxx
```

```
npm run lint --page=pages/xxx
```
**开发访问**

```
npm run serve --page=pages/xxxx
http://localhost:8888/page1.html#/home
```

### 测试环境和线上jenkins配置
1. **Choice Parameter**增加选项
```
demo
```

2. 访问地址

`http://www.bai.cn/demo/#/home`

`http://www.bai..cn/demo/#/home`

### 内置环境变量
标识 | 描述
---|---
DEV | 开发环境
TEST | 测试环境
PRE | 预发布环境
PROD | 生产环境

### vue-cli参考链接
See [Configuration Reference](https://cli.vuejs.org/config/).

### 增加修改


### 适配移动端
目前采用方案 lib-flexible+postcss-pxtorem

后面若要换postcss-px-to-viewport下面是方案以及解决方法

`https://juejin.cn/post/6934214542108934151`
`https://juejin.cn/post/6844904146865225742`
`https://juejin.cn/post/7018433228591595550?searchId=2023111010075321DB6B61B8180EE69AA8`

### 重置css样式样式，增加flex布局
重置css样式 引入：
```
@import '../../../../styles/reset.scss';
```
flex布局方法
```
引入： @import '../../../../styles/flex.scss';
使用： @include flex();
```


### 公用方法browser 的使用

```
import {browser} from '@/utils/browser'
// 判断浏览器类型以及系统文字
const abbb = browser.versions.android
const ccc = browser.language
console.log(abbb,'ssssssssssssss')
console.log('nnnnn')

```

### 公用方法common 的使用
目前拥有的方法
1.时间格式化。
2.获取链接参数
3.区域内字数限制
```
// 按需引入
import { processString, getQueryString} from '@/utils/common'
// 区域内字数限制使用示例
const abc = processString('ss77sssssssssssssss',5)
// 获取链接参数
const asss = getQueryString().a
console.log(asss,'ssssssssssssss')

```

### 公用方法jsbrige 方法的使用（与客户端的交互）
```
// 挂载原型上面
import JsBridge from "../../utils/JsBridge.js"
Vue.prototype.$bridge = JsBridge;
// 使用，例如获取token
this.$bridge.callHandler('current_token', {}, (data) => {
    console.log("获取getAppData的数据",JSON.parse(data))
    // this.signSecret = JSON.parse(data);
    // this.getInfo();
    // getDate
    
    })
// 例如关闭
this.$bridge.callHandler('close', {}, (data) => {})
```
下面是与客户端交互的文档
``
https://lfha5js1vn.feishu.cn/wiki/INw3wYG0QiNbrLk60Bpchyvxnog
``

### 请求的使用方式
在页面的api页面写上请求方式以及链接，/src/pages/demo/index.js
```
import { activityAxios } from '@/axios'

export function getDate(data){
    return activityAxios({
        url: '/list',
        method: 'get',
        params: data
      })
}

// 页面引用使用方法
import {giftWall} from '../../api/index'

giftWall(this.dataObj).then(res => {
   console.log('请求啦',response)
})

```