1.项目结构
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体，图片等静态资源
│ ├── components // 全局公用组件，组件名统一大写开头
│ ├── pages // 页面
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── stylus // 全局公用样式
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── index.html // html模板
└── package.json // package.json
2.接口调用封装
api.js
import axios from 'axios'
//判断生产环境还是开发环境
const isProduction = process.env.NODE_ENV === 'production'
const api = isProduction ? '' : '/api'
//所有接口的公用参数
const commonParams = {
Timestamp: new Date(),
ToUrl: window.location.href
}
// get
export const requestIndex = (params, apiUrl) => {
//vue的代理配置前面需要加api
apiUrl = apiUrl ? apiUrl : '/mp.php/study/v1/index';
return axios.post(api + apiUrl, Object.assign({}, commonParams, params), {
withCredentials: true,
//如果为post，需要转化一下参数的格式
transformRequest: [function(data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(res => {
return Promise.resolve(res.data)
}, err => {
console.log('axios=========err', err)
})
}
3.路由
1:用params的话刷新页面参数会丢失。
<router-link :to="{name:'reading',query:{chapter_id:info.bookinfo.book_chapter_id,book_id:info.bookinfo.book_id}}">aaaaa</router-link>
2:跳转到某个页面
this.$router.push({
path: "/TopicIndex",
query: { week: week, topic_id: id }
});
2.回退到上个页面
this.$router.go(-1)
this.$router.back(-1)
3.获取路由参数
this.$route.query.a
this.$route.params.a
4.路由守卫
以下几种只用于组件内
beforeRouteEnter(to, form, next) {
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm => {
})
}
beforeRouteLeave(to, form, next) {
//这个找到this
})
beforeRouteUpdate (to, from, next) {
//在当前路由改变，但是该组件被复用时调用
}
全局路由守卫
router.beforeEach((to, from, next) => {
// ...
})
4.html的属性
1.class的运用
//绑定的为对象，如果playing存在，那么有rotated这个class
<img :class="{rotated:playing}" class="img458x458" src="../assets/audioDetail/record.png" />
//绑定的为一个数组，可用三元判断，如果index等于currentIndex的话，class为keycolor,否则为color
<span :class="[index == currentIndex ? 'keycolor':'color']">{{item.title}}</span>
//可以不写类型
<li class="f-ul-li2" :class="itemValue == 'course' ? 'active':''">
//默认class和动态class共存
<span class="lock f28" :class="[item.open_status == 3?'lock_title':'']">{{item.title}}</span>
2、ref属性，获取完整的虚拟dom
<div class="m-menu" ref="menu"></div>
js获取方式：this.$refs.menu
3.动态图片
<img :src="currentBook.data.list.chapters_banner" alt="" class="img750x300">
4.设置自定义属性
<div class="m-punched" :data-status="1" :data-chapter="currentSong.chapter_id"> <btn-read :btnTxt="'查看读后感'" /> </div>
js获取方式：e.currentTarget.dataset
5.音频注意事项
1.开始播放时音频需 document.getElementById('hiddenPlayer').load()，不然ios会获取不到音频
写了一半...待续
