Element UI入门(二)

Maynor在掘金
725 阅读1分钟

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

1.1 布局容器

1.1.1 布局容器

使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）

官方文档 : element.eleme.cn/#/zh-CN/com…

img

步骤一: 修改src/main.js 导入 element-ui 样式和组件

/* 导入element-ui样式

*/

import 'element-ui/lib/theme-chalk/index.css'

 

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

 

/* element-ui所有组件

*/

import ElementUI from 'element-ui'

Vue.use(ElementUI)

 

Vue.config.productionTip = false

 

new Vue({

 router,

 store,

 render: h => h(App)

}).$mount('#app')

步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式



<template>
  <div id="app">
  <el-container>
   <el-header>Header</el-header>
   <el-main>Main</el-main>
   <el-footer>Footer</el-footer>
  </el-container>
 </div>
</template>


<script>


export default {

 

}

</script>

 

<style>


 /* 稍后删除 */

 .el-header, .el-footer {

  background-color: #B3C0D1;

  color: #333;

  text-align: center;

  line-height: 60px;

 }

</style>

1.1.2 reset***.css***

布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

img

步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

img

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {

  margin: 0;

  padding: 0;

}

 

table {

  border-collapse: collapse;

  border-spacing: 0;

}

 

fieldset,img {

  border: 0;

}

 

address,caption,cite,code,dfn,em,strong,th,var {

  font-style: normal;

  font-weight: normal;

}

 

ol,ul {

  list-style: none;

}

 

caption,th {

  text-align: left;

}

 

h1,h2,h3,h4,h5,h6 {

  font-size: 100%;

  font-weight: normal;

 

}

重置样式参考：www.cnblogs.com/weizhxa/p/9…

步骤二: 修改 src/main.js 导入 app.css 样式

img

/** 导入公共样式

*/

import '@/assets/app.css'

 

/* 导入element-ui样式

*/

import 'element-ui/lib/theme-chalk/index.css'

 

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

 

/* element-ui所有组件

*/

import ElementUI from 'element-ui'

Vue.use(ElementUI)

 

Vue.config.productionTip = false

 

new Vue({

 router,

 store,

 render: h => h(App)

}).$mount('#app')

1.1.3 满屏填充

在App.vue中，添加样式

 html, body, .el-container {

  height: 100%;

 }

img

1.2 导航条

1.2.1 需求

img

1.2.2 导航条

使用导航菜单(NavMenu) 完成导航条效果

官方文档 : element.eleme.cn/#/zh-CN/com…

img

步骤1: 修改 src/App.vue



<template>


  <div id="app">


  <el-container>

   <el-header>

​    <!-- 导航条 -->

​    <el-menu

​     :default-active="$route.path"

​     class="el-menu-demo"

​     mode="horizontal"

​     background-color="#545c64"

​     text-color="#fff"

​     active-text-color="#ffd04b"

​    \>

​     <el-menu-item index="/">首页</el-menu-item>

​     <el-submenu index="2">

​      <template slot="title">学生管理</template>

​      <el-menu-item index="/studentList">学生列表</el-menu-item>

​     </el-submenu>

​     <el-submenu index="3">

​      <template slot="title">个人中心</template>

​      <el-menu-item index="/login">登录</el-menu-item>

​      <el-menu-item index="/register">注册</el-menu-item>

​     </el-submenu>

​     <el-menu-item index="/cart">

​      购物车

​     </el-menu-item>

​    </el-menu>

   </el-header>

   <el-main>

​    <router-view></router-view>

   </el-main>

   <el-footer>

​     版权所有 2006 - 2022  

   </el-footer>

  </el-container>

 </div>

</template>

 

<script>


export default {

}

</script>

 

<style>


 .el-header, .el-footer {

  background-color: #B3C0D1;

  color: #333;

  text-align: center;

  line-height: 60px;

  padding: 0;

 }

</style>

1.2.3 路由

点击”首页” 和 “购物车” 可以调整页面

img

img

步骤一: 修改 src/App.vue 设置路由视图

img

img

<template>


  <div id="app">


  <el-container>

   <el-header>

​    <!-- 导航条 -->

​    <el-menu

​     class="el-menu-demo"

​     mode="horizontal"

​     background-color="#545c64"

​     text-color="#fff"

​     active-text-color="#ffd04b"

​     :router="true"

​    \>

​     <el-menu-item index="/">首页</el-menu-item>

​     <el-submenu index="2">

​      <template slot="title">学生管理</template>

​      <el-menu-item index="/studentList">学生列表</el-menu-item>

​     </el-submenu>

​     <el-submenu index="3">

​      <template slot="title">个人中心</template>

​      <el-menu-item index="/login">登录</el-menu-item>

​      <el-menu-item index="/register">注册</el-menu-item>

​     </el-submenu>

​     <el-menu-item index="/cart">

​      购物车

​     </el-menu-item>

​    </el-menu>

   </el-header>

   <el-main>

​    <router-view></router-view>

   </el-main>

   <el-footer>

​     版权所有 2006 - 2020  

   </el-footer>

  </el-container>

 </div>

</template>

 

<script>


export default {

}

</script>

 

<style>


 .el-header, .el-footer {

  background-color: #B3C0D1;

  color: #333;

  text-align: center;

  line-height: 60px;

  padding: 0;

 }

</style>

步骤二: 编写测试组件（Home.vue和Cart.vue）

img

1.2.4 页面刷新导航选中问题

默认情况：点击后的默认效果

img

刷新页面, 导航条的选中状态消失

img

修复: 修改 App.vue页面

img



<template>


  <div id="app">


  <el-container>

   <el-header>

​    <!-- 导航条 -->

​    <el-menu

​     :default-active="$route.path"

​     class="el-menu-demo"

​     mode="horizontal"

​     background-color="#545c64"

​     text-color="#fff"

​     active-text-color="#ffd04b"

​     :router="true"

​    \>

1.2.5 页眉

   <el-footer>

​    版权所有 2006 - 2022 

   </el-footer>
avatar
文章
阅读
粉丝