app ziroom 的 Vue 重构（二）

上篇文章已经配置好了：vue+vue-router+vuex，先开始进入编写页面的实现。
代码已经同步到github上：https://github.com/BokeChen/Vue-ziroom
一、H5 一些特效
在index.html 里面添加一些meta

<meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no" />  <!--处理iPhone给对应的对象自动添加链接样式-->
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!--删除苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  <!--控制状态栏显示样式-->
    <meta name="x5-fullscreen" content="true"/><!-- QQ强制竖屏 -->
    <meta name="full-screen" content="yes"/> <!-- UC强制全屏 -->

二、字体适配
在src文件夹下面创建一个config文件，config里面创建一个fontSize.js.
fontSize.js:

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';       
    }; 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

在main.js 里面引入这个js，引入指令为：import “./config/fontSize.js”;
三、合租/整租 home页面的实现
1.入口组件：App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

从App.vue 里面能看到路由视图，页面的切换主要是在这里切换。这里通常App.vue 组件通常用于处理用户登陆。我这里没有做登陆功能，所以App.vue先不处理。
2.main.js
入口js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import "./config/fontSize.js";
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js 是webpack指定的整个项目入口js。在里面可以看到，main.js 引入了Vue 模块、App.vue组件、router.js及我们添加的fontSize.js。
App.vue里面只有一个img 和router-view.
router.js 里面先引进了HelloWorld组件，再配置路由，当路由为“/”时，router-view显示HelloWorld.vue。（@符号表示src所在的路径，这个在webpack.base.conf.js 的resolve里面有配置）
从这个流程分析，我们新建一个页面组件然后在router引入
，在配置路由就可以显示这个页面了。
岔开下话题：在router.js里面我们发现HelloWorld组件是important直接引入到路由。如果全部页面都是这样引入，会造成登陆首页时同时加载全部页面的资源，这会影响网速。所以这里要考虑懒加载。

import HelloWorld from '@/components/HelloWorld'

懒加载的语法：

const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld');

由于webpack.base.conf.js里面的output定义了输出文件动态命名，所以这里就不需要webpack就不需要做更改了。

 output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

组件用require.ensure 懒加载后，在下面路由直接正常使用就行。
回到原来的话题：新建一个页面。
在src下面建一个page的文件，里面建一个名为home.vue的文件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Home pages'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

然后配置路由，在router的index.js 引入home的页面，并配置好相应的路由。
router.js

import Vue from 'vue';
import Router from 'vue-router';
import home from '../page/home/home.vue';
Vue.use(Router);
//组件懒加载，require.ensure
//const home = r => require.ensure([], () => r(require('../page/home/home.vue')), 'home');
export default new Router({
  routes: [
    {
      path: '/',
      name:"home",
      component: home,
    },
    {
      path:'',
      redirect: '/home',
    }
  ]
})

屏蔽掉App.vue 里面的img标签和一些样式。
用npm run dev ，就可以看到页面效果。

3、引入less和重置样式
vue提供的手脚夹虽然是支持less、sass、scss的，不过要先安装相应的模块才行。我这里选择less，less的安装指令为：cnpm install less-loader less -S -D 。
less安装好后，可以在package.json 看到less-loader 和less的相应的版本信息。
在src根路径下添加一个style的文件夹，在该文件夹下面添加一个common.less的样式初始化文件。
common.less(这个初始化样式是拷贝网上的，一般不建议一开始就把所有的元素都列到初始化里面，而是把一些偏的项目没涉及到的省掉，-webkit-appearance: none 是css3的不规范属性):

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    color: #333;
    font-weight: normal;
    font-family: "Microsoft Yahei";
    box-sizing: border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 0px;  
    height: 0px;  
    background-color: #F5F5F5;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
    -webkit-appearance: none;
}

textarea { -webkit-appearance: none;}   

html,body{
    height: 100%;
    width: 100%;
    background-color: #F5F5F5;
}


.clear:after{
    content: '';
    display: block;
    clear: both;
}

.clear{
    zoom:1;
}

.back_img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.margin{
    margin: 0 auto;
}

.left{
    float: left;
}

.right{
    float: right;
}

.hide{
    display: none;
}

.show{
    display: block;
}

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在style文件夹下再添加一个mixin.less文件。用于存放项目中经常用到的一些公共设置。
mixin.less:

@rootFontSize:23.4375;
@comonColorGray:rgb(156,156,156);
@comonColorBlack:black;

篇幅有点长，另开一篇再接着写。