webpack-vue全家桶之实现border-1px
2017-01-31 19:32
555 查看
举个栗子demo:
//我们做个一个一px的下底边框
app.vue
引入@import “./common/stylus/mixin.styl”
mixin.styl
base.styl
index.styl
main.js
base里面写的媒体查询为了适应不同的分辨率
mixin里面写的都是样式函数为了方便你更改参数
mainjs里面引入的index.styl是将这几个样式文件都注册并加载
大家有没有发现这里app vue 里面引入了一次样式文件,main js里面也引入了,我个人这样理解,main是全局资源的配置和注册,每个文件的需求不同,就分别引入他需要的资源,有些资源是被动的有些是必须要主动引入的比如这个mixin文件就是需要主动引入的
//我们做个一个一px的下底边框
app.vue
引入@import “./common/stylus/mixin.styl”
border-1px(rgba(7, 17, 27, 0.1))
mixin.styl
border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0 width: 100% border-top: 1px solid $color content: ' '
base.styl
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) .border-1px &::after -webkit-transform: scaleY(0.7) transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) .border-1px &::after -webkit-transform: scaleY(0.5) transform: scaleY(0.5)
index.styl
@import "./mixin" @import "./icon" @import "./base"
main.js
import 'common/stylus/index.styl';
base里面写的媒体查询为了适应不同的分辨率
mixin里面写的都是样式函数为了方便你更改参数
mainjs里面引入的index.styl是将这几个样式文件都注册并加载
大家有没有发现这里app vue 里面引入了一次样式文件,main js里面也引入了,我个人这样理解,main是全局资源的配置和注册,每个文件的需求不同,就分别引入他需要的资源,有些资源是被动的有些是必须要主动引入的比如这个mixin文件就是需要主动引入的
相关文章推荐
- webpack-vue全家桶之实现border-1px
- 利用webpack和vue实现组件化
- webpack配合vue.js实现完整的单页面demo
- VUE+WebPack游戏设计:实现两张扑克牌的逐对厮杀特效
- VUE+WebPack游戏设计:实现盒子动画和键盘特效
- VUE+WebPack游戏设计:实现碰撞检测和动画精灵
- webpack+vue.js实现组件化详解
- VUE+WebPack实现精美Html5游戏设计:纸牌战争
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
- webpack+vue 实现多页面开发
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- Vue.js中用webpack合并打包多个组件并实现按需加载
- VUE+WebPack游戏设计:用CSS实现扑克牌翻转特效
- webpack入坑之旅(六)配合vue-router实现SPA
- vue-cli 快速构建vue应用,实现webpack打包
- 一步一步来实现webpack+vue的多页面应用
- Vue.js起步实践--不用webpack或vue全家桶情况下开始动手写一个小组件
- Vue.js+webpack+node.js实现价格监测应用Ponitor
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- Vue+WebPack游戏设计:自动背景贴图和游戏主循环的实现