简介
这是去年还是前年创建的项目结构,一直放在github上没有时间去完成,最近这几个星期自己不怎么忙,就花点晚上的时间把它写完
开发配置
1.环境
编辑器:Idea+sublime,因为习惯这两个,别问为什么不使用vscode。 框架:vue全家桶+node 接口:豆瓣电影的接口
2.创建
使用vue-cli创建,因为在项目中我要使用less,所以修改一下配置文件,在webpack的配置中
{
test:'/\.less$/',
loader:'vue-loader',
options:vueLoaderConfig
}
复制代码
配置代理
proxyTable: {
'/api':{
target:"https://douban.uieee.com/v2",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
复制代码
3.比较不好处理的地方
<1>.在使用flex布局的时候,mintui这里面好多样式要重写,还有就是他有一个处理默认事件的地方要改一下
if(e.cancelBubble ){
e.preventDefault()
}
复制代码
<2>.请求回来的图片要缓存一下才能使用,使用的是网上提供的方法
let _u = moveArr[i].images.medium.substring(8);
<img :src="https://images.weserv.nl/?url=_u"/>
复制代码
<3>.购物车数据同不的问题 看网上大部分是写方法计算,但是感觉不符合我想要的,还有就是在计算属性的,因为有缓存所以数据不是最新的。即使能关闭缓存我不想多写代码呀,也不怎么适合我的想法,最后用一个数组,正好可以用这个数组监听打对勾这个事件,那我把购物车的数据直接给这个数组,监听这个数组计算总额不就是随时动态变化的了么。
watch: {
'checkboxModel': {
handler() {
this.allCount = 0;
if (this.checkboxModel.length !== this.goodsList.length) {
this.checked = false;
} else {
this.checked = true;
}
this.checkboxModel.forEach((item, index) => {
this.allCount += item.count * 2333;
})
},
deep: true
},
}
复制代码
<4>还有一个就是mintui 的checkList样式你自己处理,不要直接用她的,自己写
<label class="mint-checklist">
<span class="mint-checkbox" id="mint-checkbox">
<input type="checkbox" class="mint-checkbox-input" v-model="checkboxModel" :value="item">
<span class="mint-checkbox-core"></span>
</span>
<span class="mint-checkbox-label">
</span>
</label>
复制代码
.mint-checklist {
.mint-checkbox {
font-size: 12px;
.mint-checkbox-core {
width: 15px;
height: 15px;
position: absolute;
top: 50%;
left: 15px;
-webkit-transform: translate(0, 50%);
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.mint-checkbox-core:after {
top: 1px;
left: 4px;
}
}
.mint-checkbox-label {
font-size: 12px;
top: 50%;
position: absolute;
left: 30px;
-webkit-transform: translate(0, 50%);
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.comTotal {
position: absolute;
font-size: 12px;
top: 50%;
-webkit-transform: translate(0, 50%);
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
right: 90px;
}
}
复制代码
<5>最后一个是mintui给你提供了tabbar,但是当父组件跳转到子组件后就会失效,在子组件里失效了,本来是想通过父子组件通信解决,但是太麻烦 还是直接判端路由好了
watch: {
'selected': {
handler() {
if (this.selected === "homeComponent") {
this.$router.push(
{
path: '/homeComponent'
})
}
if(this.selected === 'shopCar'){
this.$router.push(
{
path:'/shopCar'
})
}
}
},
'$route'(to){
if(to.path.indexOf("movieDetails") == -1){
this.selected = "";
}
}
}
复制代码
最后我把地址放这:可以拉取修改提交:github.com/Visupervi/-…
转载于:https://juejin.im/post/5d0afb2e6fb9a07edd2a17a2