第一章
前言
这里对应的是课程中的第一章到第三章，因为前三章内容比较少，我就把它们合并成一章。我比较懒，要让我多写三章的内容，没门。这一章会比较简单，是一个项目的准备过程，仅仅开发了两个很简单的基础组件。
所以看起来会比较轻松，不过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- */
// 没有这一行代码 这样才能正确使用小图标
// 有这一行代码
// 老师好像用的是另外一个网站生产的小图标
[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的使用
推荐
1.4 使用stylus
要使用stylus需要安装stylus、stylus-loader，记住要在项目所在的路径下执行以下指令
cnpm install stylus --save
cnpm install stylus-loader --save
1.5 实现tab组件
推荐
歌手
排行
搜索
1.6 实现m-header组件
X Music
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别名配置简单，但是实用性很高。然后看的出来我很喜欢贴别人博客，而不喜欢自己再写一遍教程，原因就是我比较懒。对于一些文件结构有点迷惑的地方，可以看播放器的第一篇，还是说我每一篇文章都贴那个文件结构图? 如果有不懂可以提到评论，大家一起讨论。