第一章
前言
这里对应的是课程中的第一章到第三章，因为前三章内容比较少，我就把它们合并成一章。我比较懒，要让我多写三章的内容，没门。这一章会比较简单，是一个项目的准备过程，仅仅开发了两个很简单的基础组件。
所以看起来会比较轻松，不过tab组件应该在工作中应该会比较有用，这里会对vue-router进行简单运用。希望大家有所得，也希望自己在整理的过程中，能够把这个月学到都能通过文字写出来。我希望通过我的文字可以让大家体验到一个完整的开发过程，也能帮助大家解决一些在工作中遇到的需求。
最后考虑有的是开始接触vue的童鞋，所以我给大家找来Vue2.0 搭建Vue脚手架（vue-cli），这篇博客可以说是我vue.js的启蒙博客。所以接下来我就不书写关于搭建vue-cli的教程，我觉得我要写肯定不如博主写的好。
正文
1.1 配置alias
其实就是一个配置别名的方式，配置起来很简单，但是很简单。
在build文件夹下面的webpack.base.conf.js文件中搜索alias，按我的例子那样书写。
alias: {
'vue$': 'vue/dist/vue.esm.js',
'src': resolve('src'),
// 例子
'components': resolve('src/components'),
}
好处：比如说你要书写如下代码
// 原来
import Playlist from 'src/components/playlist/playlist'
// 配置完
import Playlist from 'components/playlist/playlist'
// src/components 这个使用频率是很高，这样减少了代码的重复
1.2 小图标的使用
可以借鉴一下这篇博客 ,把你需要的图标下载下来。下载下来会有如下文件(文件只会比如下多)：
music-icon.eot
music-icon.svg
music-icon.ttf
music-icon.woff
iconfont.css
demo_index.html
你可以看下demo_index.html，这里面教你了怎么使用
然后这因为这使用了stylus，所以我们要将iconfont.css转化为icon.styl，这一步可以参考这篇博客
下面是转化成功并且修改过后的icon.styl
@font-face
font-family: "iconfont"
// 注意有url的地方，原来是同一目录下，所以直接使用就好了，现在我是把它放在src/common/fonts
// stylus文件是src/common/stylus
src: url('../fonts/iconfont.eot?2qevqt')
src: url('../fonts/iconfont.eot?2qevqt#iefix') format('embedded-opentype'),
url('../fonts/iconfont.ttf?2qevqt') format('truetype'),
url('../fonts/iconfont.woff?2qevqt') format('woff'),
url('../fonts/iconfont.svg?2qevqt#iconfont') format('svg')
/* iOS 4.1- */
// 没有这一行代码 <i class="iconfont icon-001-courthouse"></i> 这样才能正确使用小图标
// 有这一行代码 <i class="icon-001-courthouse"></i>
// 老师好像用的是另外一个网站生产的小图标
[class^="icon-"], [class*=" icon-"]
.iconfont
font-family: "iconfont" !important
font-size: 16px
font-style: normal
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.icon-002-lock:before
content: "\e635"
.icon-001-courthouse:before
content: "\e636"
.icon-005-prisoner:before
content: "\e637"
.icon-004-judge:before
content: "\e638"
.icon-003-cop:before
content: "\e639"
.icon-008-bible:before
content: "\e63a"
.icon-006-prisoner:before
content: "\e63b"
.icon-007-detective:before
content: "\e63c"
.icon-011-shield:before
content: "\e63d"
.icon-019-cctv:before
content: "\e63e"
.icon-020-knife:before
content: "\e63f"
1.3 路由的配置
这里就不搞安装路由的教程了，在脚手架下载模版的时候会提示你是否要安装路由
import Vue from 'vue'
import Router from 'vue-router'
// 路由懒加载 减小打包后js的体积
const Recommend = () => import('components/recommend/recommend')
// 常规 刚刚配置的alias在这里就体现了作用
import Recommend from 'components/recommend/recommend'
Vue.use(Router)
export default new Router({
// 这个把链接中#去掉，不过上线到服务器的时候需要修改一下配置文件。详情可以看vue-router的官网
mode: 'history',
routes: [
{
path: '/',
redirect: '/recommend'
}
]
})
在这个项目中vue-router中运用就两块：一个是router-view的使用，还有一个是router-link的使用
<!-- 在tab中使用 -->
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link">推荐</span>
</router-link>
<!-- 在app.vue中会使用，作用是进行路由跳转 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
1.4 使用stylus
要使用stylus需要安装stylus、stylus-loader，记住要在项目所在的路径下执行以下指令
cnpm install stylus --save
cnpm install stylus-loader --save
1.5 实现tab组件
<template>
<div class="tab">
<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link">推荐</span>
</router-link>
<router-link tag="div" class="tab-item" to="/singer">
<span class="tab-link">歌手</span>
</router-link>
<router-link tag="div" class="tab-item" to="/rank">
<span class="tab-link">排行
</span>
</router-link>
<router-link tag="div" class="tab-item" to="/search">
<span class="tab-link">搜索</span>
</router-link>
</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
// 使用flex布局，利用flex:1做到每个盒子长度一致
// 看引用stylus文件的方式 划重点要考的 common这里的没有配置alias的话就应该写成src/common
// $color-theme有点常量的感觉，其实就是一个颜色，CSS预处理器的好处之一，可以配置全局的一些常量
// 你要使用的话把variable的一些属性换成自己需要的属性，比如说font-size:12px
@import "~common/stylus/variable"
.tab
display: flex
height: 44px
line-height: 44px
font-size: $font-size-medium
.tab-item
flex: 1
text-align: center
.tab-link
padding-bottom: 5px
color: $color-text-l
&.router-link-active
.tab-link
color: $color-theme
border-bottom: 2px solid $color-theme
</style>
1.6 实现m-header组件
<template>
<div class="m-header">
<div class="icon"></div>
<h1 class="text">X Music</h1>
<router-link to="/user" class="mine" tag="div">
<i class="icon-mine"></i>
</router-link>
</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
// mixin.styl 中写了一个bg-image,就是实现了背景图片函数，为啥要这么干，还是减少代码的重复
.m-header
position: relative
height: 44px
text-align: center
color: $color-theme
font-size: 0
.icon
display: inline-block
vertical-align: top
margin-top: 6px
width: 30px
height: 32px
margin-right: 9px
bg-image('logo')
background-size: 30px 32px
.text
display: inline-block
vertical-align: top
line-height: 44px
font-size: $font-size-large
.mine
position: absolute
top: 0
right: 0
.icon-mine
display: block
padding: 12px
font-size: 20px
color: $color-theme
</style>
mixinstyl
// 背景图片
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")
1.7 解释一下stylus这个文件夹
└── stylus // 公共样式
│ │ ├── base.styl // 对html、body 的样式控制
│ │ ├── icon.styl // 小图标
│ │ ├── index.styl // 在main.js中要有引用
│ │ ├── mixin.styl // 一些处理函数，比如说背景图片
│ │ ├── reset.styl // 重置样式，应该每个网站都会有的。
│ │ └── variable.styl // 字体、颜色的一些"常量"
结束语
我也不知道写了一些什么结束语，感觉这第一章的内容的确是太简单了，但是对于一个刚刚使用vue的新手还是会有收获的。对于一些很简单组件我会展现源码，但是对于一些复杂的组件就不展示了，还是要尊重老师的劳动成果。我要做的事情是在总结的过程中，还能给你们带来价值。其实看下来你会发现alias别名配置简单，但是实用性很高。然后看的出来我很喜欢贴别人博客，而不喜欢自己再写一遍教程，原因就是我比较懒。对于一些文件结构有点迷惑的地方，可以看播放器的第一篇，还是说我每一篇文章都贴那个文件结构图? 如果有不懂可以提到评论，大家一起讨论。
网友评论