注意：此篇是在Vue项目中运行的，后期全部都在线运行，不在依赖本地Vue项目环境，直接依赖CDN中的文件即可

1. 安装vxe-table及其依赖包

使用淘宝的镜像下载比较快
cnpm install xe-utils vxe-table

2. vue项目下的src目录下的main.js中导入相关模块

main.js中增加如下几行代码

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable);

3. src目录下的App.vue文件中删除原有代码，输入如下代码

<template>
    <div>
        <vxe-toolbar>
            <template v-slot:buttons>
                <vxe-button @click="allAlign = 'left'">居左</vxe-button>
                <vxe-button @click="allAlign = 'center'">居中</vxe-button>
                <vxe-button @click="allAlign = 'right'">居右</vxe-button>
            </template>
        </vxe-toolbar>

        <vxe-table
                border
                show-header-overflow
                show-overflow
                highlight-hover-row
                :align="allAlign"
                :data="tableData">
            <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="姓名"></vxe-table-column>
            <vxe-table-column field="sex" title="性别"></vxe-table-column>
            <vxe-table-column field="age" title="年龄"></vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                allAlign: "center",
                tableData: [
                    {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃'},
                    {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
                    {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
                    {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai'}
                ]
            }
        }
    }
</script>

4. 页面显示效果如图：

5. 官方文档地址

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic