前端-Vue电商后台管理系统(3)
Vue电商后台管理系统
前言
(三)主页布局和功能实现
一、主页布局
用到element-ui组件库中的Container布局容器，来实现主页的基础布局
（1）选择一个自己想要的布局，复制其代码
-container>
<!-- 头部区域 -->
-header>
电商后台管理系统</span>
</div>
- button type="info" v-on:click="quit">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
-container>
<!-- 侧边栏 -->
-aside width="200px">Aside</el-aside>
<!-- 右侧对应主体 -->
-main>Main</el-main>
</el-container>
</el-container>
</template>
（2）在plugins->element.js中导入并注册组件
import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
（3）添加css样式