【一】基础样式结构搭建

关于专题【vue开发音乐App】 本篇记录vue项目在初始化阶段推荐配置的基础样式结构，例如reset重置样式、基础样式、公用图标、公共的颜色/字体变量等。这些基础样式（结构）将为后续开发带来极大的便利，使代码语义明确、条理清晰、易于维护。 下面请看详细介绍： 一、配置stylus环境依赖 视频中的css样式均采用stylus编写（less、sass也可以），所以需要在package.json中的devDependencies对象里添加依赖： "stylus": "^0.54.5", "stylus-loader": "^2.1.1", 然后命令行执行 cnpm i // i为install的缩写 或者直接在项目根目录下执行： cnpm i stylus stylus-loader -D // -D等同于--save-dev，局部安装，写入到devDependencies // -S等同于--save，也是局部安装，但是写入的是dependencies 二、代码结构 project src common stylus base.styl icon.styl index.styl mixin.styl reset.styl variable.styl 在项目中按上述结构新建文件夹、文件。下面是各文件内容： reset.styl /** * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input margin: 0 padding: 0 border: 0 font-size: 100% font-weight: normal vertical-align: baseline /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section display: block body line-height: 1 blockquote, q quotes: none blockquote:before, blockquote:after, q:before, q:after content: none table border-collapse: collapse border-spacing: 0 /* custom */ a color: #7e8c8d -webkit-backface-visibility: hidden text-decoration: none li list-style: none body -webkit-text-size-adjust: none -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 前端都懂的css reset代码，消除、统一各浏览器在样式方面产生的差异。 variable.styl // 颜色定义规范 $color-background = #222 $color-background-d = rgba(0, 0, 0, 0.3) $color-highlight-background = #333 $color-dialog-background = #666 $color-theme = #ffcd32 $color-theme-d = rgba(255, 205, 49, 0.5) $color-sub-theme = #d93f30 $color-text = #fff $color-text-d = rgba(255, 255, 255, 0.3) $color-text-l = rgba(255, 255, 255, 0.5) $color-text-ll = rgba(255, 255, 255, 0.8) // 字体定义规范 $font-size-small-s = 10px $font-size-small = 12px $font-size-medium = 14px $font-size-medium-x = 16px $font-size-large = 18px $font-size-large-x = 22px 这个文件记录项目中要用到的颜色、字体大小等信息。后续在定义颜色或者字体的地方可以直接使用这些变量，比如为.example定义背景颜色： .example backgound-color: $color-background // 解析成css .example { backgound-color: #222; } base.styl @import "variable.styl" body, html line-height: 1 font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback' user-select: none -webkit-tap-highlight-color: transparent background: $color-background color: $color-text base.styl引入了上面定义的variable.styl，针对body、html做一些基础样式声明。 icon.styl // 因为这部分代码需要结合具体字体文件才能生效，且篇幅较长，就不全部贴出了，只贴出部分代码表示大致结构 @font-face font-family: 'music-icon' src: url('../fonts/music-icon.eot?2qevqt') src: url('../fonts/music-icon.eot?2qevqt#iefix') format('embedded-opentype'), url('../fonts/music-icon.ttf?2qevqt') format('truetype'), url('../fonts/music-icon.woff?2qevqt') format('woff'), url('../fonts/music-icon.svg?2qevqt#music-icon') format('svg') font-weight: normal font-style: normal [class^="icon-"], [class*=" icon-"] font-family: 'music-icon' !important speak: none font-style: normal font-weight: normal font-variant: normal text-transform: none line-height: 1 -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale .icon-ok:before content: "\e900" .icon-close:before content: "\e901" ... @font-face里的url指向的是和stylus同一层级的fonts，如果你疑惑为什么要用字体图标？如何使用字体图标？请移驾我的另一篇文章《web页面使用字体图标》，保证一看就会！ common fonts （其下包含四个文件：.eot .svg .ttf .woff） stylus mixin.styl // 背景图片 bg-image($url) background-image: url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) background-image: url($url + "@3x.png") // 文字超出部分显示省略号 no-wrap() text-overflow: ellipsis overflow: hidden white-space: nowrap // 扩展点击区域 extend-click() position: relative &:before content: '' position: absolute top: -10px left: -10px right: -10px bottom: -10px mixin（混合）允许你在css世界里定义函数。比如上面的代码可以根据当前设备最小像素比决定使用何种背景图片从而达到最清晰的效果（即2倍图和3倍图的选择），以及统一定义文字超出部分显示省略号、扩展点击区域。 index.styl @import "./reset.styl" @import "./base.styl" @import "./icon.styl" index.styl作为入口文件，代码很简单，就是引入上面介绍过的三个样式文件。 三、引用index.styl 在vue项目的入口文件——main.js中引入index.styl： import Vue from 'vue' import App from './App' // 引入index.styl import './common/stylus/index.styl' new Vue({ el: '#app', render: h => h(App) }) 四、测试 在App.vue文件内粘贴如下代码： 命令行执行npm run dev启动服务，基础样式结构搭建成功！

本文章由javascript技术分享原创和收集