elementui

elementui-day1初识（前端CRUD）

1.elementui概念

elementui底层基于vue开发的一款前端框架，是饿了么的开源的一款框架

2.导入脚手架

如果已经装过一次脚手架，直接在控制台输入指令，在路由之前(包括路由)都是y，路由以后n

vue init webpack

3.模拟显示后台的数据

3.1.在路由里面配置路径

 {
   
      path: '/user',
      name: 'User',
      component: User
    }
 {
   
      path: '/ele',
      name: 'Elementui',
      component: Elementui
    },

3.2在main.js页面引入elementui

//引入elementui的组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//告诉要使用elementui
Vue.use(ElementUI);

3.3在user.vue里面引入表格

 <el-table
          v-loading="loading"
         :data="tableData"
         style="width: 100%"
      @selection-change="selectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
         <el-table-column
           prop="createTime"
           label="日期"
           >
         </el-table-column>
         <el-table-column
           prop="name"
           label="姓名"
           r>
         </el-table-column>
         <el-table-column
           prop="address"
           label="地址">
         </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="edit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="remove(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>

3.4在main.js引入axios

//引入axios
import axios from 'axios'

//扩展Vue对象
//这里可以不用写Vue.use(axios)
Vue.prototype