eastbaby
eastbaby

Vue.js仿eleme项目(2)

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

1. 组建拆封

  • static目录下加入文件css/reset.css，做css格式的重置http://cssreset.com。
  • 更改index.html，引入reset.css, 加入meta 视口。
  • 更改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组件；书写tab布局的样式和模板，使用flex布局（推荐阮一峰教程）。

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

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


....

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

然后添加tab标签的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

...