Vue项目中常用的一些第三方库

stylus

一种css预处理器,可以更加直观的编写css代码,减少不必要的格式

下载:

npm install stylus
复制代码

使用:

  • 在style标签中加上 lang="stylus"来使用stylus
  • 样式不再需要大括号,而是用缩进来代替
  • 可以省略冒号,用空格代替
  • 不再需要分号来结尾
  • 在style标签中添加scope属性后,样式只会修饰当前组件。

better-scroll

一个用于提高滑动体验的库,可以让移动端的滑动体验更接近于原生APP

下载:仍然是npm下载或script标签引入,没什么好说的

使用也非常简单:

  • 首先 import BScroll from 'better-scroll'
  • this.scroll=new Bscroll(this.$refs.wrapper)//wrapper是被选择的元素,也就是进行滚动的元素,完成绑定即成功使用
  • 绑定成功后,要进行元素跳转时,可以用this.scroll.scrollToElement()的方法,括号内的参数是要跳转到的目标

swipper

用于实现轮播图的插件,类似于这样的:

下载:npm install swiper,或是去官网下载压缩包后引入对应的js文件和css文件

使用:通过一段示例demo来看,这是swipper.vue:

<template  style="touch-action:none;">
    <swiper :options="swiperOption" class=wrapper>
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" v-bind:src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    props:['swiperList'],
    data () {
      return {
        swiperOption: {
            loop:true,
            pagination:{
                el:'.swiper-pagination',
                clickable:true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            scrollbar: {
              el: '.swiper-scrollbar',
            },
        }
      }
    }
  }
</script>
复制代码
  • swiper标签是整个轮播图的外层父标签,其上绑定了一个配置项swipperOption,在data中定义
  • swiper-slide标签内部是轮播的图片。可以通过多个swiper-slide标签来定义已知个轮播图片,但仍建议使用v-for的方法进行列表渲染
  • 下面的四个div标签都是可选项,从上到下分别是:分页器(就是图中的小圆点)、上一张按钮、下一张按钮、进度条。
  • swiperOption的配置方法上面已经给出了示例。注意,这个配置方法随着swiper版本的不同而改变,例如一些老教程中swiperOption的配置方法就已经行不通了。所以如果出现了什么错误,去官网查api即可
  • 以上是最基础的结构,可以给各个组件添加class定制自己想要的样式,或是绑定事件

axios

一个vue官方推荐的基于promise的http库,用于进行数据请求

最常见的使用场景如下:

import axios from 'axios' //首先引入

//发送get请求
axios
      .get('URL')//可以直接在URL中添加参数
      .then(response => (this.info = response))//请求成功
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

axios
  .get('/user', {// 也可以通过 params 设置参数:
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//发送post请求
axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//发送多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

//通过向axios传递参数来进行请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

//  GET 请求远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

//可以只传入url,发送 GET 请求(默认的方法)
axios('/user/12345');

//相应函数中接收的response对象含有的信息:
{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}
复制代码

Vuex

解决非父子组件传值的问题。多用于大型单页应用之中,对于小型项目可能是一种多余的存在

使用:下载并引入Vuex,用Vue.use(Vuex)方法来使用Vuex,并export一个Store实例,实例中有存放数据的state,actions,mutations和getters

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        city:"bj"
    },
    actions:{
        changeCity(ctx,city){
            ctx.commit('changeCityShowing',city)
        }
    }
    mutations:{
        changeCityShowing(state,city){
            state.city=city;
            try {
                localStorage.city=city;
            } catch (error) {};
        }
    }
    getters:{
        reverse(){
            return state.city.split('').reverse().join("");
        }
    }
})
复制代码
  1. 在需要向外传值的组建中用 this.$store.dispatch('事件名',数据); 的方式将数据传给actions
  2. 在actions中定义相同的事件,接收两个参数,在其中将事件继续传递给mutations
  3. 在mutations中修改state中的数据,达到修改全局状态的目的
  4. 在传递的数据较少较简单时,可以直接从组件中this.$store.commit('事件名',数据);将数据提交到mutations
  5. 当要对state中的变量加工后使用时,可以将之映射到计算属性(映射至data中的变量则无法加工),或在getters中定义相关的函数
  6. getters相当于store中的计算属性。可以用mapGetters函数将之映射到局部计算属性
computed:{
    ...mapGetters(['name1',‘name2’])
    //...
}复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章