Element-ui

Element-UI安装及配置

npm install --save element-ui

在main.js下配置element-ui

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

事件样式:

<el-button :plain="true" @click="successMessage">成功</el-button>
<el-button :plain="true" @click="warnMessage">警告</el-button>
<el-button :plain="true" @click="infoMessage">普通消息</el-button>
<el-button :plain="true" @click="errorMessage">错误</el-button>

errorMessage(){
      this.$message({
        message: "错误消息",
        type: "error"
      })
    },
    infoMessage(){
      this.$message("普通消息")
    },
    successMessage(){
      this.$message({
        message: "成功信息",
        type: "success"
      })
    },
    warnMessage(){
      this.$message({
        message: "警告信息",
        type:"warning"
      })
    },

Container 布局容器

用于布局的容器组件，方便快速搭建整个页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。