# Vue-Travel

**Repository Path**: lisa_zhu2012/Vue-Travel

## Basic Information

- **Project Name**: Vue-Travel
- **Description**: 慕课网imooc 旅游demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-10-15
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-Travel

#### 项目介绍

慕课网imooc 旅游demo

#### 软件架构

软件架构说明
CSS预处理工具：stylus stylus-loader -D
字体图标-阿里图标：iconfont
轮播图工具swiper：vue-awesome-swiper@2.6.7
城市列表滚动插件better-scroll
状态管理工具 vuex

#### 安装教程

1. git clone xxxx
2. npm install
3. npm run dev

#### 使用说明

1. 如果浏览器的手机模拟器不能点击的时候，切换一下模拟器就会好用
2. xxxx
3. xxxx

#### 知识点注意

1. 

```
<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
</style>
ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
 min-width: 0   /* 宽度内容溢出技巧 */
```
2. css 点击区域布局尽量大；布局注意内容，使用ellipsis防止溢出
3. network-online 可以变更3G 2G 网速
4. 样式：.home-swiper轮播高度比例布局
```

```
5. 
```
轮播图更改样式 穿透  >>>
  .home-swiper >>> .swiper-pagination-bullet-active 
    background: #ffffff
```
6. 一维数组通过计算属性转换成二维数组
```
computed: {
    pages() {
        const pages = []
        this.iconList.forEach((item, index) => { // 项，下标
            const page =  Math.floor(index / 8)  // 0 1 2 3 4 5 6 7 8    9   向下取整数
            if (!pages[page]) {  // page = 0 page = 0
                pages[page] = []
            }  
            pages[page].push(item)   // pages[0] item1 pages[0] += item2 
        })
        return pages
    }
}
```
7. static 里面的内容可以直接访问
8. .gitignore文件夹中添加static/mock 这个文件夹就不会添加到git仓库
9. 
```
better-scroll
<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>
```
10. swiper 开始属于隐藏，显示后不能正常计算宽度  
    swiper插件，监听到父级元素或者本元素发生dom结构变化，会自我刷新一次, 通过刷新，可以解决计算宽度的问题
    observeParents: true,
    observer: true
    
#### git

合并远程分支 git merge origin/feature

#### 参与贡献

1. [去哪网](http://touch.piao.qunar.com/)

#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)