【一】基础样式结构搭建

关于专题【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文件内粘贴如下代码：

<template>
  <div id="app">
    Hello World
  </div>
</template>

<script>
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/variable.styl"

  #app
    color: $color-theme
</style>

命令行执行npm run dev启动服务，基础样式结构搭建成功！