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';
},
