VUE组件开发相关配置

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: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
• rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
• wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
• snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
• snapLoop: false 是否可以无缝循环轮播
• snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
• snapSpeed: 400, 轮播图切换的动画时间
• swipeTime: 2500 swipe 持续时间
• bounceTime: 700 弹力动画持续的毫秒数
• adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
• swipeBounceTime: 1200 swipe 回弹 时间
• 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事件

 

转载于:https://www.cnblogs.com/lovechenbo/p/8920764.html