# vue-yixiantong-demo

**Repository Path**: kevinleeeee/vue-yixiantong-demo

## Basic Information

- **Project Name**: vue-yixiantong-demo
- **Description**: 城市一线通案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-18
- **Last Updated**: 2021-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue

> 城市一线通案例



关键词：移动端, es6. flex布局

技术：

- 项目架构/组件结构设计
- 项目抽象及复用/封装与配置
- 模型层抽象与应用
- 工具函数集合抽象与应用
- 数据请求与格式化与缓存
- Vuex中央状态管理器
- 组件缓存机制/单页面路由/组件间传值(父子/兄弟)

项目目录：

```
assets - 静态文件
conponents - 组件文件
models - 模型文件
pages - 页面组件
router - 路由设置文件
store - 中央状态管理
utils - 配置与工具
App.vue - 项目根组件
main.js - 项目入口文件
```

组件管理：

所有的组件都会汇入到App.vue组件，通过main.js导入注册组件, 管理页面与渲染，component存放嵌套关系的子组件

> 如何实现组件复用和拓展？
>
> 答：拆分组件



```
components:
- Header
  - Sub
    - BackWard.vue
    - CitySellector.vue
    - FalseInput.vue
  - Common.vue
  - Home.vue
- Tab
  - Index.vue
  - Home.vue
- SearchInput
  - Index.vue
- ScrollWrapper
  - CategoryIcon
    - Index.vue
    - Sub.vue
  - CityList
    - CurrentCity.vue
    - Index.vue
    - Sub.vue
  - FoodList
    - Index.vue
    - Sub.vue
  - HotelList
    - Index.vue
    - Sub.vue
  - KtvList
    - Index.vue
    - Sub.vue
  - MassageList
    - Index.vue
    - Sub.vue
  - ViewList
    - Index.vue
    - Sub.vue
  - Sub
    - Error.vue
    - HomeTitle.vue
    - Loading.vue
    - NoDataTip.vue
    - Stars.vue
    - Swiper.vue
  - Detail
    - Sub
      - Address.vue
      - CommentKeyword.vue
      - Intro.vue
      - Name.vue
      - OpenDateTime.vue
      - Price.vue
      - Recom.vue
      - Service.vue
      - Stars.vue
      - TicketInfo.vue
      - Tip.vue
      - Title.vue
    - Food.vue
    - Hotel.vue
    - Ktv.vue
    - Massage.vue
    - View.vue
  - City.vue
  - Detail.vue
  - Home.vue
  - List.vue
  - Search.vue
```

组件抽离原则：

- 可复用的组件
- 可配置的项，在组件内部要抽离属性(放入props里)
- 前瞻性，用前瞻的眼光抽离组件
- 有独立的功能性的组件
- 组件集合一定要有结构



> 页面组件pages 与 组件文件components关系?

页面组件所需要被拆分的components组件(结构化)，组件拆分便于维护，迭代，功能拓展



项目页面导图(组件结构)：

```
- 首页
  - 专用header
    - 城市选择器
    - 假输入框
  - 滚动区域
    - 图标列表
      - 子图标项
    - 标题
    - 各分类列表
    - 错误提示
- 列表页
  - 通用header
    - 页面回退
  - 选项导航
    - 子选项
  - 滚动区域
    - 各分类列表
  - Loading
- 详情页
  - 通用header
    - 页面回退
  - 滚动区域
    - 各分类
      - 轮播图/地址/评论关键词/简介/名称
      - 营业时间/价格/推荐/星级/购票信息/商家服务
- 城市选择页
  - 通用header
    - 页面回退
  - 滚动区域
    - 当前城市
    - 城市列表
- 搜索页
  - 通用header
    - 页面回退
  - 搜索输入框
  - 滚动区域
    - 各分类列表
    - 错误提示
    - 无结果提示
    - Loading
```





源码地址：https://gitee.com/kevinleeeee/vue-yixiantong-demo