第一天
设置路径别名
在webpack.base.conf.js文件下大概34行的位置
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'styles': resolve('src/assets/styles'), 'common': resolve('src/common'), } },
下次直接在main.js中这样引用就ok
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'
设置css变量
首先你需要下载两个相关的模块,去我nodeJs中找模块,
然后编写varibles.styl 这类结尾的文件 比如:
$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem
然后在vue中可以这样引用
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
display: flex
line-height: $headerHeight
background: $bgColor
color: #fff
.header-left
width: .64rem
float: left
.back-icon
text-align: center
font-size: .4rem
.header-input
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
padding-left: .2rem
background: #fff
border-radius: .1rem
color: #ccc
.header-right
min-width: 1.04rem
padding: 0 .1rem
float: right
text-align: center
color: #fff
.arrow-icon
margin-left: -.04rem
font-size: .24rem
</style>
阿里矢量图标库
去官网打包下载之后,只需要这几个文件 iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 和 iconfont.css
这样引用 :
每个标签都用类iconfont 包裹,然后里面内容是十六进制的数字,官方上有。
<div class="iconfont back-icon"></div>
轮播插件 vue-awesome-swiper 的使用
gitHub地址:https://github.com/surmon-china/vue-awesome-swiper
上面有例子,下面列出来我项目用的demo
<template> <div class="wrapper"> <swiper :options="swiperOption"> <!-- slides --> <swiper-slide v-for="item of list" :key="item.id"> <img class="swiper-img" :src="item.imgUrl" /> </swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { name: 'HomeSwiper', data () { return { swiperOption: { /* 自定义一些参数 */ pagination: '.swiper-pagination', /* pagination指向.swiper-pagination会出现页码 */ loop: true /* 轮询 */ }, list: [{ id: '1001', imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/ad/23a79e8bde5f5002.jpg_890x330_40841a65.jpg' }, { id: '1002', imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/ad/23a79e8bde5f5002.jpg_890x330_40841a65.jpg' }] } } } </script> <style lang="stylus" scoped> /*穿透,就是说这个插件的样式是这个模块自带的css样式控制的,而vue带scoped属性只能修改本页面的css,但是我们想修改插件自带的css样式*/ /*我们可以这样写,意思是穿透 wrapper这个类下面的swiper-pagination-bullet-active 从而改变css样式*/ .wrapper >>> .swiper-pagination-bullet-active background: red .wrapper overflow: hidden width: 100% height: 0 padding-bottom: 31.25% background: #eee .swiper-img width: 100% </style>