package.json
"dependencies": {
//es语法转义
"babel-runtime":"^6.0.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
//解决移动端点击三百毫秒延迟
"fastclick":"^1.0.6"
},
main.js
import fastclick from 'fastclick'
//body下面所有点击都没有三百毫秒的延迟
fastclick.attach(document.body)
app.vue
<template>
<div id="app">
使用
<header></header>
</div>
</template>
<script>
注册组件
import MHeader from 'components/header/header' 引入
export default {
components:{
MHeader 注册
}
webpack.base.conf.js
别名配置 主要是路径配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
//'components'别名 不然会报错
'components':resolve('src/components'),
}
},
如何解决vue项目不能自动打开浏览器
首先找到config/index.js文件
在文件module.exports配置中找到autoOpenBrowser
这时我们看设置的是false
将autoOpenBrowser修改为true
Router
在index.js引入 组件
Import Rank from ‘components/recommend/ recommend‘
引入完成再配置；
Export default new Router({
Routes:[
{
Path:’/recommend’,
Component: recommend’
}]
})
在main.js中传入
在app.vue中传入
设置默认显示
{
//默认显示的页面
path: '/',
redirect: ‘/ recommend’
},
在Vue组件化中利用axios处理ajax请求的使用方法
首先在 main.js 中引入 axios
| 1 2 |
// 引入 axios import axios from 'axios' |
这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的，报错内容大致是axios is undefined。
我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2
将axios写入Vue的原型链作为Vue的属性
| 1 2 3 4 |
// 设置axios请求的默认host axios.defaults.baseURL = "https://www.ifilm.ltd/api/" // 将axios绑定给vue成为一个属性 Vue.prototype.$http = axios |
在其他组件中使用axios
| 1 2 3 |
this.$http.get('路由').then(response => { // todo something }) |
此方式可以类比到Vue的其他库使用
两种不推荐的使用示范
将axios全局化，作为全局变量
| 1 2 3 4 |
// 引入axios import axios from 'axios' // 将axios全局化 window.axios = axios; |
另外一个不太优雅的方式就是在需要的每个组件中都引入对应的库
vue引入js文件时报This dependency was not found:错误
路径错误
使用轮播
配置文件添加
“better-scroll”:”^0.1.15”
格式：let obj = new BScroll(object,{[option1,],.,.});
Options 参数
- startX:
0开始的X轴位置 - startY:
0开始的Y轴位置 - scrollY:
true滚动方向为 Y 轴 - scrollX: true 滚动方向为 X 轴
- click:
true是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true - directionLockThreshold:
5 - momentum:
true当快速滑动时是否开启滑动惯性 - bounce:
true是否启用回弹动画效果 - selectedIndex:
0wheel 为 true 时有效，表示被选中的 wheel 索引 - rotate:
25wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度 - wheel:
false该属性是给 picker 组件使用的，普通的列表滚动不需要配置 - snap:
false该属性是给 slider 组件使用的，普通的列表滚动不需要配置 - snapLoop:
false是否可以无缝循环轮播 - snapThreshold:
0.1用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页 - snapSpeed:
400, 轮播图切换的动画时间 - swipeTime:
2500swipe 持续时间 - bounceTime:
700弹力动画持续的毫秒数 - adjustTime:
400wheel 为 true 有用，调整停留位置的时间 - swipeBounceTime:
1200swipe 回弹 时间 - deceleration:
0.001滚动动量减速越大越快，建议不大于0.01 - momentumLimitTime:
300符合惯性拖动的最大时间 - momentumLimitDistance:
15符合惯性拖动的最小拖动距离 - resizePolling:
60重新调整窗口大小时，重新计算better-scroll的时间间隔 - preventDefault:
true是否阻止默认事件 - preventDefaultException:
{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }阻止默认事件 - HWCompositing:
true是否启用硬件加速 - useTransition:
true是否使用CSS3的Transition属性 - useTransform:
true是否使用CSS3的Transform属性 - probeType:
1滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件