# learn_vue_project

**Repository Path**: YanFengQiLi/learn_vue_project

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-22
- **Last Updated**: 2021-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# learn_vue_project

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### 目录划分
- /src 项目目录
- /src/assets 存放资源文件
- /src/components 存放组件  /common - 与项目无关的,可复用的公共组件 /content - 与本项目相关的组件
- /src/views    存放视图文件，即每个TabBar对应一个视图
- /src/store    存放 vuex 相关文件
- /src/router   存放 vue-router 相关文件
- /src/network  存放 网络请求 相关文件
- /src/common   存放 各种公共 JS 方法，或者自己封装的方法 、以及一些常量
- /public   在 vue-cli3 中, 打包后会被原封不动的复制到 dist 该文件夹中


### [normalize.css](https://github.com/necolas/normalize.css)
`初始化 css, 这是很多项目都会引入的三方初始化 css`


### [better-scroll](https://github.com/ustbhuangyi/better-scroll)
`解决移动端，屏幕滚动的三方包， 非常好`


### JS原生 apply() 与 call() 方法
```
总结: apply() 和 call() 的异同点

相同点:
    1.都是用来劫持另一个对象的方法, 并继承这个对象的属性
    2.都有两个形参

不同点:
    apply() 第二个参数, 接受一个数组, 并且 apply() 方法会自动的对数组进行解构, 并依次赋值给劫持到的对应的形参
    即在遇到像 Person 与 Student 这两个类中, 形参是对应一致的, 那么使用 apply()

    call()  第二个参数, 是一个以逗号分隔的并依次对应的参数列表
    即在遇到像 Car 与 Bwm 这两个类时, Car 类中参数列表依次是 brand, power, 而 Bwm 中的参数依次是 power, brand,
    那么此时, 我们就调用 call() 方法依次去对应 	Car 的形参列表

使用场景:
    编写能够在不同对象上使用的方法

function Person(name, age) {
    this.name = name;
    this.age = age;
}
function Student(name, age, grade) {
    console.log(this)

    console.log(arguments)

    Person.apply(this, arguments)

    this.grade = grade
}
var student = new Student('张三', 16, '四年级')
console.log(student.name)
console.log(student.age)
console.log(student.grade)



function Car(brand, power) {
    this.brand = brand;
    this.power = power;
}
function Bwm (power, brand, driver) {
    Car.call(this, brand, power)

    this.driver = driver
}
var bwm = new Bwm('汽油', '宝马', '自动挡')
console.log(bwm.power)
console.log(bwm.brand)
console.log(bwm.driver)
```

### 事件轮询机制
```
console.log('11111')

setTimeout( () => {
    console.log('222')
})

console.log('3333')

这段代码的打印结果依次是:  11111 3333 222

虽然没有给 setTimeout 设置延时时间, 但是 setTimeout 里面的函数, 是在所有事件执行完毕后, 在最后执行
```

### [vue 图片懒加载插件](https://github.com/hilongjw/vue-lazyload/)

### [解决移动端点击300ms延迟](https://github.com/ftlabs/fastclick)

### [解决移动端适配问题,对px单位自动转换为vw](https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md)
- 作用: 将px单位转换为视口单位的 (vw, vh, vmin, vmax)
- 在很长一段时间里,解决移动端像素适配问题都是以 `rem` 来做单位
- rem全名root em，简写rem，是一个相对长度单位，但只相对于根元素，可以简单的通过更改根元素大小，从而调整所有字体大小
其与em的基本用法是一致的，唯独不一致的是，所有元素都是相对于根元素，而不是父级元素，减少了我们的计算成本