Vue轮播图以及less使用

制作Vue版本的轮播图

第一步：

安装依赖

npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

第二步：

全局安装

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

第三步：

在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue：

并复制以下代码到你的组件中：

最后把组件引用import到需要的文件中去

less的使用

1、npm i less --save-dev 把less源码安装到开发环境

/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */

2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）

3、lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less

4、在main.js  import less from 'less'  Vue.use(less)  作用：在所有页面都可以使用less预编译css语言

5、独立的vue文件需要引入less

引入less的两种形式

第一种方式 使用导入式 引入样式库

第二种引入方式 在script中导入样式

import './less/common.less'

less中变量的使用 定义方式：

@key:value; 使用方式：@key;

字符串拼接变量使用方式 

@img:'./img/'; 

background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)

多层嵌套+变量计算；

写减法的时候左右要加空格，否则会理解为杠-

   

       

   

定义一个函数；

.test(@color:red,@size:14px){

    background: @color;

    font-size:@size;

}

.box1{

//  不传参，使用默认的；

    .test()

}

.box2{

//  给函数传参；

    .test(@color:green,@size:30px)

}