1.使用Vue-cli搭建開發(fā)環(huán)境

項目采用Webpack+Vue-router的架構(gòu)方式，開始安裝
新建文件夾打開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編寫我們的側(cè)邊導(dǎo)航欄

在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>統(tǒng)計</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>

編寫好組件內(nèi)容后引入至 leftNav模板中

import leftNav from '@/components/common/leftNav'
//構(gòu)造器內(nèi)
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">
             我是產(chǎn)品欄
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Pos',
  data () {
    return { 
    }
  }
}
</script>
<style scoped>
</style>

解決100%高的問題 在頁面中使用了Element組件鹦聪，這樣他會自動給我們生產(chǎn)虛擬DOM阱州，我們無法設(shè)置高度100%憎亚；
這時候可以利用javascript携添，來設(shè)置100%高度問題全蝶。先要給我們的<el-col>標(biāo)簽上添加一個id涯曲，我們這里把ID設(shè)置為
使用mounted鉤子函數(shù)來設(shè)置高度。

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