#  Vue2-yixiantong

**Repository Path**: null_git/vue2-yixiantong

## Basic Information

- **Project Name**:  Vue2-yixiantong
- **Description**: vue2 + webpack3 + swiper + better-scroll
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-25
- **Last Updated**: 2023-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 城市一线通

### Vue2 + Vuex + Vue-router + axios + localStorage + flex布局

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

### 组件管理：

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

如何实现组件复用和拓展？

答：拆分组件

### 组件抽离原则：

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


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

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

#### 处理npm install 因版本问题导致的报错 

![images](1.png)

原因：
- npm 升级到 7.x以上后，会出现上游依赖冲突；–legacy-peer-deps：安装时忽略所有 peerDependencie，默认使用npm 4-6版本的安装模式，安装过程中是会跳过对等依赖项。

解决方法:
```js
npm i --legacy-peer-deps
```

#### 项目目录
```
|-- src 
  |-- assets - 静态文件
  |-- conponents - 组件文件
  |   |-- Header
  |   |-- Item
      |   |-- BackWard.vue  返回按钮
      |   |-- CitySellector.vue 城市选择
      |   |-- FalseInput.vue 搜索框
  |   |-- Common.vue 共用头部
  |   |-- Home.vue
  |   |--Tab 城市Tab选项卡
      |   |-- Index.vue
      |   |-- Home.vue
  |   |--SearchInput 搜索框
      |   |-- Index.vue
  |   |-- ScrollWrapper 滚动区域
      |   |-- CategoryIcon  图标区域
          |   |-- Index.vue 图标列表
          |   |-- IconItem.vue 图标子组件
      |   |-- CityList 城市选择
          |   |-- CurrentCity.vue 当前城市
          |   |-- Index.vue 城市列表
          |   |-- CityItem.vue 城市子组件
      |   |-- FoodList 推荐美食
          |   |-- Index.vue
          |   |-- FoodItem.vue
      |   |-- HotelList 推荐酒店
          |   |-- Index.vue
          |   |-- HotelItem.vue
      |   |-- KtvList 推荐ktv
          |   |-- Index.vue
          |   |-- KtvItem.vue
      |   |-- MassageList 推荐按摩
          |   |-- Index.vue
          |   |-- MassageItem.vue
      |   |-- ViewList 推荐景点
          |   |-- Index.vue
          |   |-- ViewItem.vue
      |   |-- Others
          |   |-- Error.vue 错误组件
          |   |-- HomeTitle.vue 首页title 组件
          |   |-- Loading.vue loading加载组件
          |   |-- NoDataTip.vue 没有数据组件
          |   |-- Stars.vue 五星组件
          |   |-- Swiper.vue 轮播图组件
      |   |-- City.vue   城市滚动区域
      |   |-- Detail.vue 详情滚动区域
      |   |-- Index.vue  首页滚动区域
      |   |-- List.vue   列表滚动区域
      |   |-- Search.vue 搜索滚动区域
      |   |-- Detail  详情页组件
          |   |-- Others
              |   |--Address.vue 子组件 地址
              |   |--CommentKeyword.vue 子组件 评论关键字
              |   |--Intro.vue  子组件 详细介绍
              |   |--Name.vue 子组件 名称
              |   |--OpenDateTime.vue 子组件 开放时间
              |   |--Price.vue 子组件 金额
              |   |--Recom.vue 子组件 推荐菜品
              |   |--Service.vue 子组件 商家服务
              |   |--Stars.vue 子组件 五星
              |   |--TicketInfo.vue 子组件 购票信息
              |   |--Tip.vue 子组件 提示
              |   |--Title.vue 子组件 标题&icon图标
          |   |-- Food.vue 美食详情
          |   |-- Hotel.vue 酒店详情
          |   |-- Ktv.vue ktv详情
          |   |-- Massage.vue 按摩详情
          |   |-- View.vue 景区详情
  |-- models - 数据模型文件
  |-- pages - 页面组件
  |-- router - 路由设置文件
  |-- store - 中央状态管理
  |-- utils - 配置与工具
  |-- App.vue - 项目根组件
  |-- main.js - 项目入口文件
```

#### 半颗星星样式
```css
.half {
    background: linear-gradient(to right,$starColor 50%, #cccccc 0);
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
1. background: linear-gradient(to right,$starColor 50%, #cccccc 0);实现背景色一半一半的效果
2. -webkit-background-clip: text;  规定背景的绘制区域为文字部分
3. background-clip: border-box（默认）｜padding-box｜content-box; 
   border-box（默认） 背景被裁剪到边框盒 | padding-box 背景被裁剪到内边距框content-box 背景被裁剪到内容框。 
4. -webkit-text-fill-color: transparent;（文字填充颜色）
   这里注意一定要定义为transparent，否则会覆盖底部的背景色。
```