Java前端Vue-11(ElementUI)

ElementUI

什么是 Element UI

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  • Element UI是基于Vue 2.0的
  • Element UI 提供一组组件
  • Element UI 提供组件的参考实例, 直接复制

官网：https://element.eleme.cn/#/zh-CN/component/installation

2 搭建环境

1 创建vue项目

步骤一: 通过 vue-cli创建项目

vue create eui01

步骤二: 手动选择功能(Manually select features)

步骤三: 选择需要的组件

• Babel : JavaScript编译器, 用于版本兼容, 复制将 ES6+ 转换成 ES 5.
• Router : 路由
• Vuex : 组件数据共享

步骤四: 使用各个组件的配置,已独立文件的方式存在.

步骤五:是否保存当前配置

步骤六: 安装完成, 进入项目,并启动项目测试

2 安装 element-ui组件

第一步：npm i element-ui

第二步：在main.js中引入element-UI

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
   
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3 综合案例: 主体架构

1 需求

2 布局

使用element-ui的布局容器(Container) 进行页面布局
官方文档 : https://element.eleme.cn/#/zh-CN/component/container

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

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>

<style>
 .el-header, .el-footer {
   
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>

3 reset.css

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

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

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td {
    /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea {
    /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 {
    font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 {
    font-size: 16px; }
h3 {
    font-size: 14px; }
h4, h5, h6 {
    font-size: 100%; }

address, cite, dfn, em, var {
    font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt {
    font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small {
    font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol {
    list-style: none; }

/* 重置文本格式元素 */
a {
    text-decoration: none; }
a:hover {
    text-decoration: underline; }

abbr[title], acronym[title] {