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¶m2=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的别名为@
想要增加别名,在根目录下新建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 格式化。传送门
还有一些CSS、JS美化拓展应用JavaScript and CSS Code Beautifier,传送门
应用之后
better-scroll使用
滚动的条件:父容器高度固定,子容器高度不需要固定,内容撑开时可滚动。