本篇记录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
- stylus
- common
- src
在项目中按上述结构新建文件夹、文件。下面是各文件内容：
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启动服务，基础样式结构搭建成功！
网友评论