sass 安装指令
cnpm i sass-loader --save-dev
cnpm i node-sass --save-dev
less 安装
cnpm i less less-loader --save
在style中 写上lang="less",就可以进行样式嵌套
div{color:cyan; p{ color:red; } }
axios 专门用于数据请求
cnpm i axios --save
swiper 轮播图安装
cnpm install vue-awesome-swiper --save
main.js
import Vue from 'vue'
import Swiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(Swiper)
组件
<template>
<swiper :options="swiperOption">
<swiper-slide>妖</swiper-slide>
<swiper-slide>风</swiper-clide>
<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>
</swiper>
</template>
<script>
export default {
data(){
return{
swiperOption:{//设置属性
pagination: {//显示分页
el: '.swiper-pagination',
clickable:true
},
// direction : 'vertical',//切换模式 横屏或者竖屏
autoplay: {//设置自动播放速度
disableOnInteraction: false,
delay:4000
},
loop:true, //开启无限循环
//设置点击箭头
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next'
}
}
}
}
</script>
element ui (饿了么)
cnpm i element-ui --save
vuex (大仓库—资源管理)
cnpm install vuex --save -dev
lazyload(懒加载)
cnpm install vue-lazyload --save -dev
网友评论