1、简化路径，为常用路径简化别名，如@/assets/css/可简化为csss/： 步骤：1在build下webpack.base.conf.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路径达到简化效果 } } 2重启vue项目，vuerundev; vue-awesome-swiper轮播插件的应用： 步骤：1在main.js中引入全局插件： npminstall--savevue-awesome-swiper@7 importVueAwesomeSwiperfrom'vue-awesome-swiper' import"swiper/dist/css/swiper.css" Vue.use(VueAwesomeSwiper)
2、定义一个量change，通过this.$emit向父组件city.vue传值e.target.innerText， 父组件通过接受子组件的传值， 父组件在把值通过属性传值的方法传递给子组件lists.vue 即间接实现兄弟组件的传递
3、vue项目的动画组件： （?新建一个动画组件anim.vue: （?然后在style里面定义.v-enter,.v-leave-to,.v-enter-active,.v-leave-active动画个个时刻的样式。 （?在其他组件用引入该动画组件，然后将需要执行动画效果的标签包裹在该动画组件标签中即可。
4、vue项目的接口联调:即将模拟的json数据改成从服务器获取数据： 步骤：在config->index.js下： dev:{ assetsSubDirectory:'static', assetsPublicPath:'/', proxyTable:{ "/api":{ target:"http://localhost:80",//将此改为服务地址，即发送/api的ajax会从该地址获取数据 } },
5、通过一次性定时器实现函数截流，即滑动时没16ms执行一次，让执行的频率不那么快,从而实现代码优化
6、vue项目打包上线：进入该项目的命令行，输入npmrunbuild，会生成dist文件，然后将该文件里内容放在服务上，如放在xampp->htdocs根目录文件夹下
7、scoped限制该vue文件下的css仅在该.vue文件下使用；
8、由循环生成的this.$refs是一个数组
9、设置元素的宽高比值固定： .wrapper overflow:hidden width:100% height:0 padding-bottom:25% //即高始终为宽的25% 扩展：父元素display:flex布局，子元素flex:1;min-width:表示自适应父元素剩余的宽度，且不会超出父元素的宽度。 跨平台的axios的使用：实现跨平台的请求 步骤：1 npminstallaxios--save //或者 2 importaxiosfrom"axios" 3 methods:{ //通过.json文件模拟后端接受的数据，将index.json文件放在static里面 getHomeInfo(){ axios.get("./static/mock/index.json").then(this.getHomeInfoSucc) }, getHomeInfoSucc(res){ console.log(res) } } 4在config>index.js里面做如下设置，则可以实现通过调用api/index.json接口时，自动转到本地static/mock/index.json文件 proxyTable:{ "/api":{ target:"http://location:8098", pathRewrite:{ "^/api":"/static/mock" } } }Bscroll使用方法： npm下载better-scroll：npminstallbetter-scroll--save; 引入better-scroll：importBscrollfrom"better-scroll"; 定义标签dom:
实例化bscroll:this.scroll=newBscroll(this.$refs.div)即可;注意：Bscroll提供滚动到指定DOM位置的API，this.scroll.scrollToElement(dom);
10、iconfont字体图标的应用： 步骤：1在iconfont注册账号，建立一个项目，然后将需要的图标加入到该项目下，下载到本地电脑该项目文件夹下src->assets->iconfont中。 2在iconfont.css的url中修改字体在本地的路径，在main.js中直接引入该文件import"./assets/iconfont.css"。 3即可显示该图标字体。
11、keep-alive优化代码，避免重复发送ajax获取重复数据，keep-alive缓存重复的数据： //exclude="组件name名"表示该组件不需要缓存，即每次跳转到页面都重新加载mounted生命周期 在标签外部包裹一层keep-alive标签，即可缓存，即在vue中增加了activated生命周期(在页面初始化mounted挂载完成，或者跳转回当前页面时，执行该生命周期函数)， activated(){//因为keep-alive而多出来的生命周期，即页面初始加载时和mounted一样执行，且在每次页面跳转返回当前页面时，仍然会执行，但是mounted因为在keep-alive下不会执行了 if(this.lastCity!==this.city){ //即跳转回当前页面时，如果选择的城市发生改变，则再次发生ajax，否则就不发生ajax this.lastCity=this.city; this.getHomeInfo(); } }
12、vuex的使用：如果您不打算开发大型单页应用，使用Vuex可能是繁琐冗余的。确实是如此——如果您的应用够简单， 您最好不要使用Vuex。一个简单的globaleventbus就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态， Vuex将会成为自然而然的选择； 步骤：1 安装vuex:npminstallvuex--save； 2 src文件夹下创建一个store文件夹用于处理vuex； 3 在store文件夹下创建index.js； 4在index.js里写： importVuefrom"vue" importVuexfrom"vuex" Vue.use(Vuex); //vue里面使用插件（如vuex）都是通过Vue.use(插件名) exportdefaultnewVuex.Store({ //创建newVuex.Store仓库，并导出export state:{ //存放全局公用的数据 city:"重庆", //首页头部显示的城市，默认为重庆 }, actions:{ //接受模块通过this.$store.dispatch传递过来的changeCity=item的数据，ctx.commit表示把该数据名和值传递给mutations changeCity(ctx,item){ ctx.commit("changeCity",item) } }, //注释：如果是this.$store.commit传递过的数据，可以直接不需要actions，从而直接通过mutations处理修改state的值 mutations:{ //接受actions通过ctx.commit传递的数据并处理，即修改state里面的city让其等于item changeCity(state,item){ state.city=item; } } }) 5在main.js中： importstorefrom"./store" newVue({ el:'#app', router, store, components:{App}, template:'' }) 6 在模块中{{this.$store.state.city}}即可使用； 7 修改store中的数据：this.$store.dispatch("changeCity",item);给vuex的store仓库的actions派发一个名字为changeCity，值为item的数据传递给store 如果是this.$store.commit("changeCity",item)可以直接给vuex的store仓库不需要actions，从而直接通过mutations处理修改state的值
13、这种写法，避免了a标签改变了li表示内里的文字颜色，相当于且自带跳转页面的功能。 其中to="."表示返回上一页 路由带参数传值： { path:'/detail/:id', component:Detail }vue页面的滚动事件：window.addEventListener("scroll",this.headerScroll,true)添加true有时候才能触发滚动事件，页面滚动距离始终为 可能原因是body,html有overflow:hidden属性 ，删除即可。 activated(){ //当前组件页面显示的时候触发该生命周期，因为window是全局的，在其他页面滚动时也会触发，所以需要在当前页面隐藏或者被其他页面替换时，移除滚动事件 window.addEventListener("scroll",this.headerScroll,true) }, deactivated(){//当前组件页面隐藏/或被其他页面替换的时候触发该生命周期 window.removeEventListener("scroll",this.headerScroll,true) } vue中的递归组件：即组件里面调用组件自己本身； 通过name："detailComponent"名，去调用 vue组件的name名称的作用： （?递归组件时，作为标签名 （?该组件不需要缓存时也需要用到 避免当前页面滚动到底部，跳转到其他页面时也在底部： 在vue项目的router->index.js中： exportdefaultnewRouter({ routes:[ { path:'/', component:Home },{ path:'/city', component:City },{ path:'/detail/:id', component:Detail, }, { path:'/pics', component:Pics }], scrollBehavior(to,from,savedPosition){ //vue-router的滚动行为，避免当前页面滚动到底部，跳转其他页面时也在底部 return{x:y:0} } })
14、stylus样式的应用： 步骤：1npminstall--save stylus;引入该样式文件。有时下载需要npminstall--save stylus-loader; 2即可。 3varibles.stylus该文件夹存放stylus的变量，在标签内引入@import"../../assets/varibles.stylus"，然后 background:@bgColor即可使用该变量。 @在路径中指的是src目录，即@/assets/css/reset.css,注意，在css样式中引入其他css目录时，需要写成~@/assets/css/reset.css。
15、移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?移动端click点击事件，会延迟300ms,怎么解决？解决：引入第三方包,解决移动端click事件延迟300ms； npminstallfastclick--save; 在main.js中写如下代码 importfastClickfrom'fastclick' fastClick.attach(document.body)
16、localStorage本地存储: letdefaultCity='重庆'; try{ //避免用户禁止了localStorage，会报错 if(localStorage.city){ defaultCity=localStorage.city } }catch(e){} exportdefault newVuex.Store({ state:defaultCity, //首页头部显示的城市，默认为localStorage.city或者重庆 })
