音乐 WebApp 学习笔记（一）

学习目标

• 了解一个中度复杂规模的应用开发
• 掌握 vue.js 的高级应用
• 学会组件化、模块化的开发方式
• 了解原生 App 体验交互的实现原理

一、项目目录

使用 vue_cli 初始化项目 vue init webpack xx(ProjectName)

安装一些项目的依赖（后续使用到的依赖将会陆续补充到此处）

• stylus
• stylus-loader
• css-loader
• babel-runtime —— ES6 语法转译
• babel-polyfill —— ES6 一些语法补丁，比如 promise，在入口文件处引入
• fastclick —— 解决移动端点击300s延迟

推荐 src 目录

• api —— 放置后端请求相关代码，ajax,jsonp等
  • config.js
• common —— 放置静态资源，公用图片，通用js，样式文件
  • fonts
  • image
  • js
  • stylus
• components
• router —— 路由相关文件
• store —— vuex 相关代码
• App.vue —— 项目入口文件
• main.js —— 项目核心文件

注意文件夹下若有.gitkeep文件，此文件的作用是在当前文件夹下若没有其他文件依然可以上传到git上。

路径相关问题

• 在build/webpack.base.conf.js下可以进行路径别名的设置

二、基于 promise 封装 jsonp

安装jsonp依赖 —— npm install jsonp --save

import originJSONP from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

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