vue使用ElementUI搭建主页

1、打开 Element - The world's most popular Vue UI framework ,找到Container 布局容器,找到 实例 代码,拷贝该代码至Home.vue的template里面的div中,div、el-container、el-aside、el-munu元素height设置100%(为了让元素贴边),el-container删除border。删除下面的HelloWorld.vue引入,删除export default里面的components,拷贝模板代码里面的data(){……}到export default,里面的20改为10(暂时为了显示美观,后面还会改)。

2、然后到App.vue,删除id="app"中除了以外的元素,和style里面的样式内容,在style里面加入(也是为了元素贴边)

#app{
  min-height: 100vh;
}

 3、在assets文件夹中,新建gloable.css(调整布局样式),里面内容为

html,body,div{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}

在main.js中引入该css

import './assets/gloable.css';

你可能感兴趣的:(vue,vue.js,elementui,前端)