1.使用Vue-cli搭建开发环境

项目采用Webpack+Vue-router的架构方式，开始安装
新建文件夹打开git-Bash输入vue-cli安装命令

npm install vue-cli -g
vue init webpack AwesomePos
cd AwesomePos
vue init webpack

Src目录下新建pages文件防止我们的单页主体页面Pos.vue

<template>
  <div class="pos">
   Hello Pos Demo!
  </div>
</template>
<script>
export default {
  name: 'Pos'
}
</script>
<style scoped>
</style>

修改路由router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Pos from '@/components/page/Pos'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pos',
      component: Pos
    }
  ]
})

2.使用iconfont编写我们的侧边导航栏

在components中新建文件夹common并新建文件leftNav.vue

<template>
  <div class="left-nav">
 <ul>
        <li>
            <i class="icon iconfont icon-wodezichan"></i>
            <div>收银</div>
        </li>
        <li>
            <i class="icon iconfont icon-dianpu"></i>
            <div>店铺</div>
        </li>
        <li>
            <i class="icon iconfont icon-hanbao"></i>
            <div>商品</div>
        </li>
         <li>
            <i class="icon iconfont icon-huiyuanqia"></i>
            <div>会员</div>
        </li>
        <li>
            <i class="icon iconfont icon-tongji"></i>
            <div>统计</div>
        </li>
</ul>
  </div>
</template>
<script>
export default {
  name: 'leftNav',
  data () {
    return {
    }
  }
}
</script>
<style>
    .left-nav{
       color:#fff;
       font-size:10px;
       height:100%;
       background-color: #1D8ce0;
       float:left;
       width:5%;
    }
    .iconfont{
       font-size:24px;
    }
    .left-nav ul{
        padding:0px;
        margin: 0px;
    }
    .left-nav li{
        list-style: none;
        text-align: center;
        border-bottom:1px solid #20a0ff;
        padding:10px;
    }
</style>

编写好组件内容后引入至 leftNav模板中

import leftNav from '@/components/common/leftNav'
//构造器内
export default {
  name: 'app',
  components:{
    leftNav
  }
}

3.使用饿了吗组件库

安装

npm n install element-ui --save

在项目中引入
在main.js中

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

简单使用一些布局
在pos.vue文件中使用24栏布局

<template>
  <div class="pos">
    <div>
        <el-row >
            <el-col :span='7'>
            我是订单栏
            </el-col>
            <!--商品展示-->
            <el-col :span="17">
             我是产品栏
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Pos',
  data () {
    return { 
    }
  }
}
</script>
<style scoped>
</style>

解决100%高的问题 在页面中使用了Element组件，这样他会自动给我们生产虚拟DOM，我们无法设置高度100%；
这时候可以利用javascript，来设置100%高度问题。先要给我们的<el-col>标签上添加一个id，我们这里把ID设置为
使用mounted钩子函数来设置高度。

 mounted:function(){
      var orderHeight=document.body.clientHeight;
      document.getElementById("order-list").style.height=orderHeight+'px';
  },