CND 仿工程化开发，尝试一下Vxe-table的入门使用

Vue3（三）CDN + ES6的import + 工程化的目录结构
https://www.jianshu.com/p/c454e8dd6dc2

有网友问我，在这种方式下，如何使用 vxe-table ，其实和使用 element-plus 的思路是一样的。

引入

按照官网说明，引入 vxe-table

main.js

修改 main.js

const ver = window.__ver || ''

Promise.all([
  import('./store/index.js' + ver),
  import('./router/index.js' + ver),
  import('./app.js' + ver),
]).then((res) => {
  // 创建vue3的实例
  const app = Vue.createApp(res[2].default)
    .use(res[0].default) // 挂载vuex
    .use(res[1].default) // 挂载路由
    .use(ElementPlus) // 加载ElementPlus
    .use(VXETable) // 加载 vxe
    .mount('#app') // 挂载Vue的app实例

  // 给 vue 实例挂载内部对象，例如：
  // app.config.globalProperties.$XModal = VXETable.modal
  // app.config.globalProperties.$XPrint = VXETable.print
  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
  // app.config.globalProperties.$XReadFile = VXETable.readFile
})

设置路由

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => myImport('views/home')
  },
  {
    path: '/About',
    name: 'About',
    component: () => myImport('views/About')
  },
  {
    path: '/component',
    name: 'component',
    component: () => myImport('views/component')
  },
  {
    path: '/store',
    name: 'store',
    component: () => myImport('views/store')
  },
  {
    path: '/vxe',
    name: 'vxe',
    component: () => myImport('views/vxe/index')
  }
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes
})

export default router

尝试

按照官网的第一个例子做一个简单的尝试

index.html

index.js

export default {
  name: 'vxe',
  template: '',
  setup () {
    const 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' }
    ]

    const gridOptions = {
      border: true,
      columns: [
        { type: 'seq', width: 50 },
        { field: 'name', title: 'Name', slots: { default: 'name' } },
        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
        { field: 'address', title: 'Address', showOverflow: true }
      ],
      data: [
        { 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' }
      ]
    }

    return {
      tableData,
      gridOptions
    }
  }
}

看看效果

首先需要建立一个网站，如果是Windows环境，可以使用IIS建立一个网站。

然后运行网站就可以看到效果了。

vxe

这里只是一个简单的尝试，其他功能可以按照官网的介绍来实现。

源码

https://gitee.com/naturefw/nf-vue-cdn/tree/master/vxe

在线看

https://naturefw.gitee.io/nf-vue-cdn/vxe/