elementui入门

1.前端服务器搭建

(1)创建一个static web project

(2) 安装 npm install -g vue-cli

(3) vue init webpack 项目名

(4)cd 项目名

​    npm run dev  运行服务

完成上面步骤后，就将vue.js项目放入到前端服务器中运行了。如果安装速度慢可以使用淘宝镜像代理：npm config set registry https://registry.npm.taobao.org

2.element安装

 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 ，是一种很好的前端开发，可以很好的用来实现前后端分离

(1)安装
​    npm i element-ui -S
(2)引入elementui 在 main.js

　　import ElementUI from 'element-ui'; //引入核心js组件
　　import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
　　Vue.use(ElementUI) //引用

3.配置main.js(所有配置写在一起的，看的时候注意区分)

 

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
import axios from 'axios'//引入axios请求
import UserMock from './userMock.js'//引入假数据源
//配置axios的全局基本路径
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
Vue.use(ElementUI) //引用elementui
//上面这行代码的意思 是阻止显示生产模式的消息
Vue.config.productionTip = false//默认配置false

/* eslint-disable no-new */
new Vue({//挂载index中所有的路由和组件
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

1.element组件使用 效果： 客户端（浏览器）输入地址-----> 根据路由进入相应的组件中---------->vue界面渲染，展示

步骤1：新建一个vue文件

<template>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="您好">
      <p>欢迎您</p>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: '欢迎来到vue',
        visible:false
      }
    }
  }
</script>

步骤2：在index.js中配置路由（浏览器访问的路径，以及组件的引入）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'//引入界面模板
import Elementui from '@/components/_01elementui'

Vue.use(Router)

export default new Router({//将路由导出到需要挂载的文件中，main.js
  routes: [
    {
      path: '/',//访问路径
      name: 'HelloWorld',
      component: HelloWorld//组件名与上面导入的名称一致
    },
    {
      path: '/_01elementui',
      name: '_01elementui',
      component: Elementui
    },

上面只是一个简单的引入，其他还有很多组件和样式的使用，如el-button 按钮、el-tree 树形、el-table表格、el-form表单、el-pagination分页、el-container容器、el-layout布局

el-tabs页签 选项卡、el-dialog对话框、el-alert 提示框等，使用的方式一样，只是界面展示内容不同，就不再重复了。

4.mockjs:前端工程师 用来模拟的数据

安装mockjs

(1) npm install mockjs

(2)userMock.js（假数据生成的文件）文件引用 mockjs

let Mock=require('mockjs') ;

(3)在js生成数据 ,拦截axios请求(了解)返回自己生成的假数据，具体代码如下
测试：

let Mock=require('mockjs')
//定义一个数组
var dataList = [];
//循环16次生成数据，并将数据放入到数组中，得到一个装有假数据的集合dataList
for(var i=0;i<16;i++){
    dataList.push(Mock.mock({
        'id': '@increment',
        'name': '@cname',
        'phone': /^1[0-9]{10}$/,
        'email': '@email',
        'address': '@county(true)',
        'createTime': '@date("yyyy-MM-dd")'
    }));
}
//分页，index是起始数据，size带表条数index*size，带表结束数据
function pagination(index, size, list){
    return list.slice((index-1)*size,index*size);
}
//拦截axios请求opts，前端传入的参数 para new RegExp('/user/list',拦截的路径
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    //把上面得到的假数据赋值给list集合
    var list =dataList;
    console.log(opts.body)
    //取出传递过来的参数的当前页
    var index = JSON.parse(opts.body).page; //3
    //写死的一页条数
    var size = 10;
    //总条数
    var total = list.length
    //调用分页方法，分页
    list = pagination(index, size, list)
    //拦截ajax请求后将假数据的结果返回
    return {
        'total': total,
        'data': list
    }
})

5.使用axios发送请求完成（vue.crud）

安装axios

1.cd 当前项目名

2.npm install axios --save

测试：具体代码如下

<template>
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--users就是前端页面展示内容的数据-->
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px"
    >

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        users: [],
        total:0,
        page:1
      }

    },
    methods:{
      getUsers(){
        //这个是对象  {key:value}
        let para = {
          page:this.page
        }

        //加载数据
        //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
        //res就是假数据返回的结果
        this.$http.post('/user/list',para).then(res=>{
          console.log(res);
          //自动假数据封装成一个data对象
          //将加数据取出后赋值给当前页面中的users，然后就可以展示了
          this.users = res.data.data;
          //
          this.total = res.data.total;
        });
      },
　　　　//监听当前页面的改变
      handleCurrentChange(val){
        //currentPage
        console.log(val);
        //把当前页 赋值给page这个字段
        this.page = val;
        this.getUsers();
      }
    },
    mounted(){
      //页面加载完之后执行的方法
      this.getUsers();
    }
  };
</script>