学习目标
- 了解一个中度复杂规模的应用开发
- 掌握 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) : ''
}