2. Element-UI进门

一、常用组件库

1、Mint UI

主页:http://mint-ui.github.io/#!/zh-cn

说明:饿了么开源的基于Vue的移动端UI组件库

2、Element-UI

主页:http://element-cn.eleme.io/#/zh-CN

说明:饿了么开源的基于Vue的PC端UI组件库

二、Element-UI实例

1、引入脚本库

创建 06uipro文件夹,复制05vue中综合案例相关代码

2、引入css和脚本

	
    <head>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    head>
    <body>
        <script src="vue.js">script>
        <script src="axios.js">script>
        
        <script src="https://unpkg.com/element-ui/lib/index.js">script>
    body>

3、渲染用户列表

    <div id="app">
      <el-row>
        <el-button>默认按钮el-button>
        <el-button type="primary" plain>主要按钮el-button>
        <el-button type="success" round>成功按钮el-button>
        <el-button type="info">信息按钮el-button>
        <el-button type="warning">警告按钮el-button>
        <el-button type="danger">危险按钮el-button>
      el-row>
      <template>
        <el-table :data="userList" stripe border style="width: 100%">
          
          
          <el-table-column type="selection" width="55">el-table-column>
          <el-table-column prop="id" label="id" width="180"> el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          el-table-column>
          <el-table-column prop="age" label="年龄" width="180">
          el-table-column>
          <el-table-column prop="email" label="邮箱"> el-table-column>
        el-table>
      template>
    div>

4、浏览器中运行

你可能感兴趣的:(Vue.js,elementui,vue)