五，项目实战，页面骨架开发

1. 组建拆封

• static目录下加入文件css/reset.css，做css格式的重置http://cssreset.com。
• 更改index.html，引入reset.css, 加入meta 视口。

<meta name="viewport"
          content = "width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">

• 更改eslint语法。在eslintrc.js的rules下面加两个配置：

 'semi': ['error', 'always'],
 'indent': 0

• main.js中new Vue({ el: 'body', components: { App } });将body作为一个element挂载点，所以app.vue中写的template代码都在body标签里面。

(Vue2.0中，不要把挂载点设置到 html 或者 body 标签上，因为 Vue 2.0 现在会把组件的 dom 替换到挂载的节点上。所以你需要创建一个子节点，然后挂载上去。)

• App.vue中引入组件header并注册。注意我们已经在webpack中写过alias路径，也可以不需要./直接写components；components中的key不要命名为header,防止警告和原生标签冲突。

import header from './components/header/header.vue';
export default {
    components: {
      'v-header': header
    }
  };

• 安装stylus依赖。方法一，cnpm install stylus stylus-loader; 方法二，在package.json里面改，然后cnpm install。stylus语法参考张鑫旭的翻译。

补充一点npm知识：

当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们，在模块根目录下npm install module-name，然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里(dependencies)。
-save和save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save
自动把模块和版本号添加到dependencies部分。
npm install module-name -save-dev
自动把模块和版本号添加到devdependencies部分。

devDependencies 下列出的模块，是我们开发时用的，不会被部署到生产环境，比如css-loader。dependencies 下的模块，则是我们生产环境中需要的依赖。

• 在App.vue中引用header组件<v-header></v-header>；书写tab布局的样式和模板，使用flex布局（推荐阮一峰教程）。

注意我们不需要额外考虑浏览器兼容的style样式，因为在 vue-loader/postcss文件可以搞定。不过要注意兼容情况，参考这个http://coding.imooc.com/learn/questiondetail/3644.html
postcss根据http://caniuse.com/书写，兼容性不错。

<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%
      height: 40px;
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center
</style>

2. Vue-router

1.0的文档在这里https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
遵循课程，我们安装0.7.13版本的vue-router，用npm安装方法同上(package.json中要写在dependencies里面）。

在main.js中引用vue-router，按照官方文档的例子来，要用extend语法加start挂载点，不能用new语法。注意app的写法也要变。

components/goods/good.vue (注意import的时候可以不需要.vue后缀）

<template>
  <div>I am goods</div>
</template>

<script type="text/ecmascript-6">
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

Vue.use(VueRouter);

let app = Vue.extend(App);

let router = new VueRouter();

router.map({
  '/goods': {
    component: goods
  },
  '/ratings': {
    component: ratings
  },
  '/seller': {
    component: seller
  }
});

router.start(app, '#app');

App.vue

<template>
  <div>
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <a v-link="{ path: '/goods' }">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{ path: '/ratings' }">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{ path: '/seller' }">商家</a>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
....

接着我们用router.go('/goods');指定默认的路由。(vue-router 2.0 中，router.go 变成 router.push了 参数是一样的.)

然后添加tab<a>标签的stylus样式。display改为块级元素这样点击不用具体到文字上而是区块上就可以。注意CSS书写规范，先写布局，方框等触发dom重绘的放在布局后面，最后才写字体、颜色等可以被继承的。然后把默认的class名字v-link-active换一个名字写进new vuerouter中并添加样式。

 .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240,20,20）

let router = new VueRouter({
  linkActiveClass: 'active'
});

几个tips：

如果改的是非 src 文件夹下的代码，比如改的 webpack 的配置文件，就需要重启服务。

vue-router hash 模式的大致原理是根据修改 hash 值，触发 hashChange，然后对应的 hash 去把 router-view 渲染成对应的组件，不会引发页面的重载。

3. 像素border实现

关于tab栏下面的1像素的实现，即不管什么dpr值都是1像素(严格意义上的像素，不是css像素）。由于dpr问题不能直接代码里写1px。手机验证用草料https://cli.im生成二维码可以方便手机查看。

流程：伪元素+Y轴缩放。先利用了mixin书写嵌入代码中的1px代码，即 伪元素相对于元素绝对定位后（伪元素是宿主元素的子元素），给伪元素1像素边框。然后给tab的div元素添加新的class, 根据设备最小dpr进行scallY。这些代码我们做成全局的以便将来重复使用。

注意:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after – 这个样子，用来跟“伪类(pseudo-classes)”区分开，(例如 :hover, :active, 等)。

Q: 为啥在main.js已经全局引入了 mixin.stylus,在组件里还要再次@import mixin.stylus呢？
A: 全局引入后会被编译成全局的css代码，但mixin中的stylus函数无法编译成css，所以 其他组件用到stylus函数时无法从全局的css中找到,还要在组件中引入mixin.stylus 才能被编译成完整的css。mixin实际上就是把引用的mixin定义的代码替换到引入的位置，从stylus的编译考虑，如果你使用了某个mixin定义的代码而不去指定它引用的路径，那么它是完全不知道从哪去查找这个mixin定义的。

关于retina像素等等很绕的概念有几个链接阐释的不错：
https://www.w3cplus.com/css/towards-retina-web.html
http://coding.imooc.com/learn/questiondetail/8563.html
http://benweizhu.github.io/blog/2017/03/25/css-retina-image/

我的疑问，，这段代码不是很懂http://coding.imooc.com/learn/questiondetail/21399.html

具体代码如下：

//mixin.styl

border-1px($color)
  position: relative
  &::after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

// base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px-dpr
    &::after
      -webkit-transition: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px-dpr
    &::after
      -webkit-transition: scaleY(0.5)
      transform: scaleY(0.5)

// App.vue

...
<style lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/mixin"
  .tab
    display: flex
    width: 100%
    height: 40px;
    line-height: 40px
    // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
...