vue 音乐app学习之路

eslint使用

针对单个 js 文件禁用 ESLint 语法校验

在代码顶部添加一行注释

/* eslint-disable */

还可以在注释后加入详细规则，这样就能避开指定的校验规则了

/* eslint-disable no-new */

eslint配置

rules: {
    "规则名": [规则值, 规则配置]
}
//"off"或者0    //关闭规则关闭
//"warn"或者1    //在打开的规则作为警告（不影响退出代码）
//"error"或者2    //把规则作为一个错误（退出代码触发时为1）

JSONP

就是利用<script>标签没有跨域限制来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
参考链接

json 是一种数据格式
jsonp 是一种数据调用的方式。
你可以简单的理解为 带callback的json就是jsonp.

如何在css、html中使用alias相对路径

Vue CLI3中路径：\node_modules@vue\cli-service\lib\config\base.js中已经配置了src的别名为@

image.png

想要增加别名，在根目录下新建vue.config.js，

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        assets: "@/assets",
        components: "@/components",
        views: "@/views"
      }
    }
  }
}

此时就可以在JS中使用了，如import 'assets/stylus/index.styl';，但是在CSS中，直接使用@import 'assets/stylus/variable';则会编译报错，，原因是 css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias，所以会报找不到目录。
如何解决
在 Webpack 中 css import 使用 alias 相对路径的解决办法有两种；

• 直接为 css-loader 添加 ailas 的路径，但是在 vue-webpack 给的模板中，单独针对这个插件添加配置就显得麻烦冗余了；
• 在引用路径的字符串最前面添加上 ~ 符号，如 @import "~assets/style/theme"；Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样alias 配置就能生效了
  各类非 js 直接引用（import require）静态资源，依赖相对路径加载问题，都可以用 ~ 语法完美解决；
  参考链接

图片懒加载

音乐推荐列表中使用到很多图片，但是用户只能看见一些，如果一开始就加载所有图片的话是很浪费资源的，所以要使用懒加载。
具体使用看官方文档

chrome JSON美化工具

当查看JSON 文件或接口时，可能是这种效果，怎么能忍，快快安装jsonView jsonViewer json formatter 格式化。传送门

image.png
还有一些CSS、JS美化拓展应用JavaScript and CSS Code Beautifier，传送门
应用之后
image.png

better-scroll使用

滚动的条件：父容器高度固定，子容器高度不需要固定，内容撑开时可滚动。