# vue-music

**Repository Path**: jxmlearner/vue-music

## Basic Information

- **Project Name**: vue-music
- **Description**: vue学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-music

## 1. 添加远程仓库
```
git remote add origin git@gitee.com:jxmlearner/vue-music.git
git push -u origin master
```

## 2. 添加git分支
```
git checkout -b routeranimation
git add .
git commit -m '路由动画'

--提交分支
git push -u origin routeranimation
--查看分支
git branch
--切换到主分支
git checkout master
--将routeranimation分支合并到主分支
git merge routeranimation
```

## 3. vue路由动画的主要样式
```
<template>
  <div id="app">
    <header class="header">
      <h2>路由切换动画</h2>
    </header>
    <div class="main">
      <transition name="routerani">
        <router-view/>
      </transition>
    </div>
    <footer class="footer">
      <nav class="tabs">
        <router-link tag="div" class="tab-item" to="/">主页</router-link>
        <router-link tag="div" class="tab-item" to="/about">关于</router-link>
        <router-link tag="div" class="tab-item" to="/my">我的</router-link>
      </nav>
    </footer>
  </div>
</template>
<style lang="stylus">
*
  margin 0
  padding 0
/*隐藏滚动条样式-移动端下用的较多*/
::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;
}

#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  width 100%
  height 100%
  padding 40px 0
  position relative
  overflow-x hidden

.header
  position fixed
  left 0
  top 0
  width 100%
  background-color rgba(18, 221, 255, 1)
  h2
    height 40px
    line-height 40px
    font-size 18px
    margin 0
    color white
    text-align center

.routerani-enter
  opacity: 0
  transform: translateX(100%)

.routerani-leave-to
  opacity: 0
  transform: translateX(-100%)
  position: absolute

.routerani-enter-active, .routerani-leave-active 
  transition  all 0.6s ease

.footer
  position fixed
  left 0
  bottom 0
  width 100%
  height 40px
  background-color rgba(16, 58, 105, 1)
  .tabs
    display: flex
    .tab-item
      flex 1
      line-height 40px
      text-align center
      color white
      &.router-link-exact-active
        color #42b983
</style>
```

## 5. 为ESLint增加几条rule
```js
rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-trailing-spaces': 'off',
  'eol-last': 'off',
  'no-tabs': 'off',
  'space-before-function-paren':'off',           // 不校验函数括号前后的空格
  'indent': 'off'                                // 不校验缩进
},
```

## 6. fastclick使用
+ 安装： `yarn add fastclick`
+ 在`main.js`中引入
```js
import fastclick from 'fastclick'

fastclick.attach(document.body)
```

## 7. `@import`引入样式时的路径问题
+ 方式1用相对路径-这种方式如果组件目录很深,还得去数要用多少 ../之类的
+ 方式2 使用`~@`, @在vue-cli下自动代表src目录, 引入样式和引入组件有点点差别，就是前面多一个波浪号，原因是：CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径。
```
<style lang="stylus" scoped>
  //@import "./assets/stylus/variable"
  @import "~@/assets/stylus/variable"

  #app
    color: $color-theme
</style>
```

## 8. 路由懒加载
```js
{
  path: '/my',
  name: 'my',
  component: () => import(/* webpackChunkName: "my" */ './views/My.vue')
}
```

## 9. 使用axios
+ [axios](https://github.com/axios/axios)
+ 安装 `yarn add axios`
+ 建立一个`assets/js/http.js`文件
```js
import axios from 'axios'

let instance = axios.create()

instance.defaults.baseURL = '/'
instance.defaults.timeout = 30000

export default instance
```

## 10. 使用`better-scroll`
+ [better-scroll](https://github.com/ustbhuangyi/better-scroll)
+ 安装 `yarn add better-scroll`
+ [better-scroll使用介绍](https://zhuanlan.zhihu.com/p/27407024) [文档地址](https://ustbhuangyi.github.io/better-scroll/doc/)
+ [官方示例](https://ustbhuangyi.github.io/better-scroll/#/examples/zh)

## 11. vue写插件参考
[vue插件](https://segmentfault.com/a/1190000016313195)

## 12. 防抖和节流
1. 防抖：在web端最容易遇到的就是input搜索，用户输入一个字符，会在指定的时间中监听是否清空有字符进入，如果没有，那么就执行对应的函数，这样就解决了用户频繁输入字符而前端发起请求给服务器造成的压力的问题
```js
// 简单的防抖实现
function debounce(fn, time = 300) {
  let timer = null;
  return function () {
    timer && clearTimeout(timer)
    timer = setTimeout(() =>{
      fn.apply(this, arguments);
    }, time);
  }
}

debounce(function () {
  console.log('debounce')
}, 300)
```
2. 节流：
```js
// 节流函数
function throttle(fn, time = 300) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, time);
  };
}
 
$(window).on(
  "scroll",
  throttle(() => {
    console.log("触发了scroll");
  }, 300)
);
```
3. 总结
节流：保证回调能在指定的时间间隔中依次有规律的执行   
防抖：保证回调能在指定的时间间隔中等待是否有再次执行回调，如果没有则执行，如果有则重置继续等待；