vue项⽬--仿写去哪⼉⽹app--遇到的问题及说明总结
1. 移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显⽰不是1px，怎么解决?
2. 移动端click点击事件，会延迟300ms，怎么解决？
解决：引⼊第三⽅包，解决移动端click事件延迟300ms；
npm install fastclick --save;
在main.js中写如下代码
import fastClick from 'fastclick'
fastClick.attach(document.body)
3. scoped限制该vue⽂件下的css仅在该.vue⽂件下使⽤；
4. iconfont字体图标的应⽤：
步骤： 4.1 在iconfont注册账号，建⽴⼀个项⽬，然后将需要的图标加⼊到该项⽬下，下载到本地电脑该项⽬⽂件夹下src->assets->iconfont中。
4.2 在iconfont.css的url中修改字体在本地的路径，在main.js中直接引⼊该⽂件import "./assets/iconfont.css"。
4.3 <span class="iconfont"></span>即可显⽰该图标字体。
5. stylus样式的应⽤：
步骤：5.1 npm install --save stylus；引⼊该样式⽂件。有时下载需要npm install --save stylus-loader;
5.2 <style lang="stylus" scoped/> 即可。
5.3 varibles.stylus该⽂件夹存放stylus的变量，在<style lang="stylus" scoped/>标签内引⼊@import
"../../assets/varibles.stylus"，然后
background:@bgColor即可使⽤该变量。
6. @在路径中指的是src⽬录，即@/assets/css/reset.css，注意，在css样式中引⼊其他css⽬录时，需要写成
~@/assets/css/reset.css。
7. 简化路径，为常⽤路径简化别名，如@/assets/css/可简化为csss/：
步骤：7.1 在build下f.js⽂件下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //@这是src⽬录的别名
'csss':resolve('src/css') //这是src/css的别名，从⽽⽤csss替代src/css路径达到简化效果
}
}
7.2 重启vue项⽬，vue run dev;
8. vue-awesome-swiper轮播插件的应⽤：
步骤：1在main.js中引⼊全局插件：
npm install --save vue-awesome-swiper@2.6.7
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
2.
<swiper :options="swiperOption" >
<!-- slides -->
<swiper-slide>
<img class="swiper-img"
src="img1.qunarzz/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg" alt="去哪⽹"/> </swiper-slide>
<swiper-slide>
<img class="swiper-img"
src="img1.qunarzz/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg" alt="去哪⽹" /> </swiper-slide>
魔兽世界法师技能<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
9. 设置元素的宽⾼⽐值固定：教师节贺卡制作方法
.wrapper
overflow:hidden
width:100%
height:0
中国古代十大名剑padding-bottom:31.25% //即⾼始终为宽的31.25%
扩展：⽗元素display:flex布局，⼦元素flex:1;min-width:0，表⽰⾃适应⽗元素剩余的宽度，且不会超出⽗元素的宽度。
10. 跨平台的axios的使⽤：实现跨平台的请求
步骤：10.1 npm install axios --save //或者<script src="unpkg/axios/dist/axios.min.js"></script>
10.2 import axios from "axios"
10.3 methods:{ //通过.json⽂件模拟后端接受的数据，将index.json⽂件放在static⾥⾯
getHomeInfo(){
<("./static/mock/index.json").HomeInfoSucc)
},
getHomeInfoSucc(res){
console.log(res)
}
}
10.4 在config>index.js⾥⾯ 做如下设置，则可以实现通过调⽤api/index.json接⼝时，⾃动转到本地static/mock/index.json⽂件
proxyTable: {
"/api":{
target:"location:8098",
pathRewrite:{
"^/api":"/static/mock"
}
高速公路什么时候开始收费}
}
11. Bscroll使⽤⽅法：
1. npm下载better-scroll：npm install better-scroll --save;
2. 引⼊better-scroll：import Bscroll from "better-scroll";
3. 定义标签dom: < div ref="div"></div>
4. 实例化bscroll: this.scroll=new Bscroll(this.$refs.div)即可;
注意：Bscroll提供滚动到指定DOM位置的API，this.scroll.scrollToElement(dom);
12.由循环⽣成的this.$refs是⼀个数组
13.定义⼀个量change，通过this.$emit向⽗组件city.vue传值e.target.innerText，
⽗组件通过<v-alpha :letters="letterCities" @change="letterChange"></v-alpha>接受⼦组件的传值，
⽗组件在把值通过属性传值的⽅法传递给⼦组件lists.vue
即间接实现兄弟组件的传递
14. 通过⼀次性定时器实现函数截流，即滑动时没16ms执⾏⼀次，让执⾏的频率不那么快，从⽽实现代码优化
15. vuex的使⽤：如果您不打算开发⼤型单页应⽤，使⽤ Vuex 可能是繁琐冗余的。确实是如此——如果您的应⽤够简单，
您最好不要使⽤ Vuex。⼀个简单的 global event bus 就⾜够您所需了。但是，如果您需要构建⼀个中⼤型单页应⽤，您很可能会考虑如何更好地在组件外部管理状态，
Vuex 将会成为⾃然⽽然的选择；
步骤：15.1 安装vuex:npm install vuex --save ；
15.2 src⽂件夹下创建⼀个store⽂件夹⽤于处理vuex；
15.3 在store⽂件夹下创建index.js；
15.4 在index.js⾥写：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex); //vue⾥⾯使⽤插件（如vuex）都是通过Vue.use(插件名)
export default new Vuex.Store({ //创建new Vuex.Store仓库，并导出export
state:{ //存放全局公⽤的数据
city:"重庆", //⾸页头部显⽰的城市，默认为重庆
},
actions:{ //接受模块通过this.$store.dispatch传递过来的changeCity=item的数据，ctxmit表⽰把该数据名和值传递给mutations
changeCity(ctx,item){
ctxmit("changeCity",item)
}
},
//注释：如果是this.$storemit传递过的数据，可以直接不需要actions，从⽽直接通过mutati理修改state的值
mutations:{ //接受actions通过ctxmit传递的数据并处理，即修改state⾥⾯的city让其等于item
changeCity(state,item){
state.city=item;
}
}
})
15.5 在main.js中：
import store from "./store"
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
15.6 在模块中{{this.$store.state.city}}即可使⽤；航空大学
15.7 修改store中的数据：this.$store.dispatch("changeCity",item)；给vuex的store仓库的actions派发⼀个名字为changeCity，值为item的数据传递给store
如果是this.$storemit("changeCity",item)可以直接给vuex的store仓库不需要actions，从⽽直接通过mutati理修改state的值
16.localStorage本地存储:
let defaultCity='重庆';
try{ //避免⽤户禁⽌了localStorage，会报错
if(localStorage.city){
defaultCity=localStorage.city
}
}catch(e){}
export default new Vuex.Store({
state:defaultCity, //⾸页头部显⽰的城市，默认为localStorage.city或者重庆
})
17. keep-alive优化代码，避免重复发送ajax获取重复数据，keep-alive缓存重复的数据：
<keep-alive exclude="组件name名"> //exclude="组件name名"表⽰该组件不需要缓存，即每次跳转到页⾯都重新加载mounted⽣命周期
<router-view/>
</keep-alive>
在<router-view/>标签外部包裹⼀层keep-alive标签，即可缓存，即在vue中增加了activated⽣命周期(在页⾯初始化mounted挂载完成，或者跳转回当前页⾯时，执⾏该⽣命周期函数)，
activated(){ //因为keep-alive⽽多出来的⽣命周期，即页⾯初始加载时和mounted⼀样执⾏，且在每次页⾯跳转返回当前页⾯时，仍然会执⾏，但是mounted因为在keep-alive下不会执⾏了举重49公斤级是什么意思
if(this.lastCity !== this.city){ //即跳转回当前页⾯时，如果选择的城市发⽣改变，则再次发⽣ajax，否则就不发⽣ajax
this.lastCity=this.city;
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论