1.VUE的接口获取swiper轮播：
在public文件下创建一个data文件夹再创建imgJson.json文件：
{
"imglist":[
{
"imgurl":"https://img2.baidu.com/it/u=2741764822,31952901&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"url":"www.baidu.com"
},
{
"imgurl":"https://img0.baidu.com/it/u=2531828205,2557062548&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
"url":"www.baidu.com"
},
{
"imgurl":"https://img0.baidu.com/it/u=2752337540,3600841572&fm=253&fmt=auto&app=138&f=JPEG?w=1058&h=500",
"url":"www.baidu.com"
},
{
"imgurl":"https://img1.baidu.com/it/u=1054244600,3783921739&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250",
"url":"www.baidu.com"
}
]
}
main.js里全局引用一下：
安装教程在上篇
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
/* 导入less */
import less from 'less'
/* 把less当作组件引入 */
Vue.use(less)
Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
components下创建一个轮播组件：
v-for="(v, i) in imgList" :key="i" @click.native="goto(v.url)" >
App.vue中引入轮播组件：
轮播图
效果图：
2.安装使用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 查看版本
4、在main.js import less from 'less' Vue.use(less)
5、独立的vue文件需要引入less
实际应用:
App.vue文件：
轮播图
欢迎使用less
- {{v}}
src文件下创建less文件夹，创建两个less文件：
common.less文件：
/* 可以在less中引入别的less文件 从而提高代码复用 */
@import url(./init.less);
/* 定义一个函数 */
.test(@color:red,@size:14px){
background: @color;
font-size: @size;
}
.a1{
.test()
}
.a2{
.test(@color:@colorGreen,@size:30px)
}
ul{
width: @k;
height: @k;
background: @colorRed;
}
li:nth-of-type(1){
/* 加减法的时候左右一定要空格,否则会理解为横杠- */
width: @k - 20px;
background: @colorGreen;
}
.box1{
width: @k*2;
height: @k*2;
background: @colorRed;
.box2{
width: @k;
height: @k;
background:@colorGreen;
.box3{
width: @k/2;
height: @k/2;
background: @colorBlue;
}
}
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
/* url里面必须要用引号 */
background: url("@{imgurl}logo.png") no-repeat;
h1{
color: @colorRed;
}
}
init.less文件：
*{margin: 0;padding: 0;}
/* 使用变量 可以嵌套 图片路径也可以使用变量*/
@colorRed:red;
@colorGreen:green;
@colorBlue:blue;
@imgurl:'../assets/';
@k:100px;
效果图：
★☆使用手册：
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js import less from 'less' Vue.use(less)
5、独立的vue文件需要引入less
less中变量的使用 定义方式：@key:value; 使用方式：@key;
字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")
写减法的时候左右要加空格，否则会理解为杠-
多层嵌套+变量计算；
混合 = 函数
运算符
可以对高度、宽度、角度进行计算；
- {{item}}