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
自定义插槽模板 {{ row.name }}
自定义插槽模板 {{ row.name }}
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/