# vue-app

**Repository Path**: iTAze/vue-app

## Basic Information

- **Project Name**: vue-app
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-12-12
- **Last Updated**: 2021-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-app

> 去哪旅行app

## Build Setup

### 引入icon问题

文件中要引入iconfont, 我们直接再 main.js 中引入, 降低文件的多次引入

### 别名问题

再`main.js`中, 我们写路径的时候, 可以把一些公用的路径起一个别名, 来简化代码的可读性.
配置文件再 build-->webpack.base.conf.js 中的 resolve-->alias,可以添加修改别名设置
如果你要再css等模块中使用别名, 那么你需要加上 `~`紧跟别名
当你设置完这之后, 保存的时候, 编译会报错, 这个需要重新编译打包

### stylus 的使用

后缀名是 `styl`
定义变量用 `$` 开头

### 引入 swiper 轮播插件

这里我们引入的是 2.6.7 的版本.
轮播图如果是网上资源的话, 会有明显的抖动感( 就是原本轮播图下面的盒子会先占再轮播图的位置, 等轮播图加载出来之后, 才会回到原本的位置), 这样肯定是不行的, 我们需要再 轮播图 加上一个 wrapper 盒子 并设置一下样式

```JavaScript
.wrapper
    width 100%
    height 0
    overflow hidden
    padding-bottom 56.8%
    // 这个是图片的宽高比
    background #eee
    // 默认一个很浅的灰色背景
```

现在 我们设置好轮播, 我们需要修改小圆点, 嗯, 加一个配置项就好了, 发现小圆点是蓝色的, 并不是想要的, 那~我们修改一下样式?
嗯 改了, 但是并没有用. 这是为什么呢?
因为 我们设置 `style` 的时候 加上了`scoped`这个代表只对当前页面有用
那我们要怎么解决呢?
`>>>` 这个代表穿透, 就是不受到 scoped 的限制. 但是需要一个父容器  
父级 >>> 需要修改的子级

还有一个就是, 我们不可能生成 很多的 img 标签, 需要用数据来推动, 使用 vue 的 v-for 指定来帮助我们循环创建标签, 我们只需要写好对应的数据即可, 但是我估摸这 url 不支持相对路径, 只支持绝对路径.

### 文字超出以省略号形式显示

```css
ellipsis()
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
```

这是超出以省略号形式的样式显示.
但是再有些时候, 并不会造成效果
那么, 我们需要再需要以这种形式显示的 DOM 节点的 父元素 添加一个属性
`min-width: 0`
这样就可以做到我们想要的效果

## 上线路径问题

当我们请求静态资源的时候, 一般都是用 api 下面的来请求资源, 但是资源还是再服务器上面, 需要用到代理, 而且 vue 中提供了代理的一种方式, 再 `congif`-->`index.js`里面的**proxyTable**就是用来替换路径的

## 动态渲染,父子组件传值

### 父子组件传值

当父组件传值给子组件的时候, 是通过`v-bind`绑定属性进行传值的, 子组件通过`props`进行接收

> 当传值的时候, 我们设置的为空数组, 所以 swiper 会按住空数组进行渲染, 当子组件获取到父组件传值后, 会重新进行渲染, 所以默认是 最后一张图片.

如何解决?

我们让不让 siwper 通过 空数组进行创建, 直接通过 父组件传递过来的值进行创建. `v-if="list.length"` 这样是如果是空数组的时候, swiper 就不会通过空数据进行创建了, 默认会显示第一张了.

但是 vue 中, 是逻辑与代码分离, 不是特别好只需要加一个 v-if 判断即可

## 路由

### 路由中颜色的问题

当你给一个标签包括了 `router-link`, 其实只是对这个标签的外层包裹了一个`<a>`标签, 而且这个`a`标签还是有默认的颜色, 我们每次都需要手动调整.

### 路由中的 better-scroll

再一些列表页中, 我们可能需要用到 isScroll 这个插件
我们这个页面再 城市选择中用到了 这一个效果, 但是我们用的 better-scroll 这个插件,这个插件是 isScroll 的封装,优化的代码等

## 兄弟组件传值

> 兄弟组件传值有几种方式, 其中一中方式是 子传递给父,父再传递给子. 这样就形成了兄弟组件传值

子组件 通过 $emit(事件,值) 把值传递给父组件
子组件 通过 @事件 来接受传递的值

## 监听兄弟组件传递过来的值

利用 `watch` 来监听值, 如果 值 改变了, 就会触发一个 better-scroll 的一个方法`scroll.scrollToElement()`传入 DOM 元素, 就会切换到 DOM 元素对应的位置

### 获取 DOM 元素

获取 DOM 元素, 需要再 dom 元素上添加一个 `res` 属性, 然后 vue 用$refs来接受

## 鼠标滑动的 A~Z, 展示内容改变

先兄弟组件传值, 通过上面方法, 再通过定义一个数组, 接受传递过来的值, 然后循环这个值,展示页面, 定义 三个 touch 事件, 再move的时候, 再通过之前点击的方式传递给父组件, 父组件再触发, 之前写好的 点击事件, 就模拟了手指触摸滑动.

### 具体实现步骤

1. 可以现在 data 中定义一个变量,
2. 等到触发 touchStart 事件的时候变成true
3. 在 touchMove 事件中先判断该变量的值是否为 true,为true在执行
4. 等到 touchEnd 事件的时候,变成false

在 startMove 中写逻辑
先定义一个元素(SY)获取"A"距离顶部的高度.
在 定义一个元素(MY) 获取当前位置 - 不需要的位置差.获取到手指在这个区域触摸的位置
在 定义一个元素(I),通过 (MY-SY)在向下取整, 获取到当前点击的是哪一个元素
然后再通过判断, I 的范围,如果在这个范围中, 就向父组件传值.

### 优化

每次都需要判断 SY 的值, 浪费, 所以我们可以把这个定义到外部,
做一个节流, move事件是大量触发的,所以我们定义一个很小的 setTimeout事件, 再这个时间之内就不做任何处理,超过了这个时间就触发

## vuex

### 简单使用 vuex 进行数据共享

先安装 vuex 然后再 main.js 中引入 vuex, 记得挂载到 vue 的实例上面去, 这样你再每个页面都可以使用 vuex 的东西了.

1. 先给元素绑定一个 click 事件, 然后定义一个方法, 调用 vuex 中的属性, 传递给 路由的js 文件 修改到属性的值
2. 但是 当你点击过之后, 再次刷新网页, 那么还是默认的地址, 我们需要做一个 localStorage 来进行缓存

## 全局组件的解绑

### 当绑定一个事件为 window 所有的时候,会带来大量问题

我再 详情页里面绑定了一个 window 的scroll 事件, index首页同样会触发此事件, activated
有一个生命周期钩子是, deactivated ,这个钩子是再此页面被隐藏或者说更换页面之前执行.

## 组件中暴漏出来的 name 的作用

### 作用

1. `<keep-alive exclude="Detail"></keep-alive>` 每次都需要发送 ajax 请求, 不会用到缓存
2. 递归组件时调用
3. vue chrome调试工具使用

## scrool 拖动多个页面中互相影响

### 解决问题

```javascript
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
```

再路由页面加上这个语句就可以结局,
这句话的意思是说, 再每次进行路由切换的时候, 都会先进行 滚动到 x:0, y:0 的位置

## 异步组件加载

### 组件加载

再打包的时候, 会把所有的 js 都打包再 app.js 文件中, 所以再打开首屏(首页)的时候, 会把别的组件中的所有 js 都加载过来 这样会造成首屏加载慢 首屏变白
有一种给异步组件加载 就是按需加载, 再你加载哪一个组件的时候, 哪一个组件的 js 才会加载,这样就避免了 vue 项目的首屏问题,
按需加载 就是 再用的时候才去加载

首屏问题
从 route js中, 把你引入的组件,变成按需加载 只需要改变
原本的样子:

```JavaScript
import Home from '@/pages/home/Home'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})
```

改变之后的样子

```JavaScript
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/Home')
    }
  ]
})
```

并且这个适用于任何组件, 只需要响应的替换即可,并不一定是只有首屏才需要做