vuedemo1-3

开启Element封印

　　Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。在项目中自己写组件虽然灵活，但是效率并不高效，所以要学会站在巨人的肩膀上干活，Element就是巨人的肩旁，也是现在国内比较成熟的以一套Vue的组件库。所以我决定 使用这个组件库开发项目。

　npm安装

　　这里使用npm的方式安装，它能更好地和webpack打包工具配合使用。

npm install element-ui --save

　　如果你网络状况不佳可以使用cnpm来进行安装。

　完整引入项目

　　在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)
})

　　以上代码便完成了Element的引入。需要注意的是，样式文件需要单独引入。

　用Element的el-row的布个局

　　安装好，先做个简单的布局小试牛刀，这里作两栏布局，Element支持用24栏的形式进行布局。

　　在Pos.vue里添加模版布局：

<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设置为order-list。然后在vue构造器里使用mounted钩子函数来设置高度。

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