码迷,mamicode.com
首页 > 其他好文 > 详细

element创建布局

时间:2018-07-01 11:39:02      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:pytho   新建   base   添加   web   element   disable   webkit   strong   

关于element不做介绍,用即可,不用BB那么多。官网:http://element-cn.eleme.io

1 安装

npm i element-ui -S

技术分享图片

打开项目中的package.json,在dependencies中可以发现element已经被添加了,

技术分享图片

 

2 创建布局

技术分享图片

 

官网中已经提供了代码,此时我们拿来用即可,复制官网代码修改本地app.vue文件如下:

<template>
<div id="app">
<div id="top">
 
</div>
<div id="aside">
 
<el-menu router="true">
<el-menu-item index="/dashboard">
<i class="el-icon-location"></i>
<span slot="title">
仪表盘
</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>博客管理</span>
</template>
<el-menu-item index="/newarticle">
<i class="el-icon-edit"></i>
<span> 新建博文</span>
</el-menu-item>
<el-menu-item index="1-2"><i class="el-icon-document"></i><span>博客列表</span></el-menu-item>
</el-submenu>
<el-submenu>
<template slot="title">
<i class="el-icon-message"></i><span>留言管理</span>
</template>
<el-menu-item index="">
<i class="el-icon-time"></i><span>最新留言</span>
</el-menu-item>
</el-submenu>
</el-menu>
 
</div>
<div id="main">
<router-view/>
</div>
</div>
</template>

<script>
export default {
name: ‘App‘
}
</script>

<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
 
#top {
padding: 0px;
position: absolute;
height: 50px;
line-height: 50px;
 
top: 0px;
left: 0px;
right: 0px;
background-color: #409EFF;
color: white;

}
 
#main {
position: absolute;
top: 50px;
left: 230px;
right: 0px;
bottom: 0px;
}
 
#aside {
position: absolute;
left: 0px;
top: 50px;
width: 230px;
bottom: 0px;
}
 
#aside el-menu {
margin: 0px;
}
 
#footer {
position: absolute;
bottom: 0px;
left: 230px;
right: 0px;
text-align: center;
height: 30px;
background-color: aqua;
line-height: 30px;
}
</style>

保存运行一下,发现并没有出现自己期望的布局样式,查看一下官网,官网有如下提示:

技术分享图片

所以修改自己的main.js文件,代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

保存运行一下:

技术分享图片

注:menu有一个router属性 设置为true时候可直接调用index指向的链接地址,即可实现导航。

 技术分享图片

 

  

 

  

 

  

element创建布局

标签:pytho   新建   base   添加   web   element   disable   webkit   strong   

原文地址:https://www.cnblogs.com/giserpan/p/9249428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!