chopper云音乐开发笔记

2018-08-10 admin

依赖版本号

  "dependencies": {
    "axios": "^0.18.0",
    "fastclick": "^1.0.6",
    "jsonp": "^0.2.1",
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-router": "^3.0.1"
  },

问题总汇

1. 开发前的准备工作

  1. vue-cli脚手架安装
vue init webpack my-project

  1. 配置meta标签
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  1. 解决移动端300ms延迟
//main.js
import FastClick from 'fastclick'
FastClick.attach(document.body)
  1. 解决抓取接口的跨域问题 (没用原视频讲的jsonp方法) 参考文章: https://blog.csdn.net/u012369… https://blog.csdn.net/fabulou…

2. props中 数组和对象 的写法

   props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
   }

3. <keep-alive>缓存路由页面

<keep-alive>
    <router-view/>
</keep-alive>

了解更多<keep-alive>: https://segmentfault.com/a/11…

4. promise封装

   new Promise((resolve, reject) => {
    jsonp(url, option, (err, data) => {
      if (!err) {
        console.log(data);
        reslove(data)
      } else {
        console.error(err)
        reject(reject)
      }
    })
  })

5. get请求的url拼接

     url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

    function param (data) {
      let url = ''
      for (let i in data) {
        let value = data[i] !== undefined ? data[i] : ''
        url += `&${i}=${encodeURIComponent(value)}`
      }
      return url ? url.substring(1) : ''
    }

6. encodeURI() 与 encodeURIComponent()区别

encodeURI()是对整个URL编码的函数,对特殊含义的符号"; / ? : @ & = + $ , #“不进行编码,解码函数decodeURI()。 encodeURIComponent()能编码”; / ? : @ & = + $ , #"这些特殊字符,解码函数decodeURIComponent()。 例:

encodeURIComponent('{ "ct": 24 }') // 结果: "%7B%20%22ct%22%3A%2024%20%7D"
encodeURI('{ "ct": 24 }')  //结果:"%7B%20%22ct%22:%2024%20%7D"

参考文章: https://www.cnblogs.com/huzi0…

7. scoped 与 module区别

网上一搜一大堆内容,我用的module,就是每次写$style.className好头疼。。。

8. css样式:两行后省略

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

9. 箭头函数与普通函数中的this指向

见我提的问题:https://segmentfault.com/q/10… 参考文章:https://www.cnblogs.com/freel…

10. 开发工具 network下的 HXR中的请求 与 JS中的请求 区别

没弄明白

11. vue-awesome-swiper 鼠标滑动图片后自动轮播停止

(未解决)

原文链接:https://segmentfault.com/a/1190000015957692

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37685.html

文章标题:chopper云音乐开发笔记

相关文章
JavaScript开发工具
常用的有sublime,webstorm,notepad++等 ...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
JavaScript库开发者们的规则
保持无侵入性 我的HTML标记不想知道你的JavaScript代码。 严禁修改和扩展Object.prototype! 这条很重要,因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块,不要搞乱它们。 不要...
2015-11-11
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
如何优雅的使用vue+Dcloud(Hbuild)开发混合app
最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的plus这个环境变量,难倒每次都得使用npm run build先把vue打包,然后再用Hbuild打开...
2018-05-22
回到顶部