前端开发指南之vue-grid-layout的使用实例_vue.js_

前言

Vue Grid Layout官方文档

Vue Grid Layout中文文档

可通过拖拽改变布局（如果我们做简易开发，通过拖拽组件形成页面或者有这个需求就是非常实用的了）

因为vue-grid-layout是vue2版本的 但自己用的是vue3版本，所以要安装vue3的依赖和相关配置

效果图

一、vue中简单案例

1、安装组件 NPM

npm install vue-grid-layout --save

Yarn

yarn add vue-grid-layout

2、vue文件

二、vue3使用（vue文件）

在vue3中如果报错:

external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor

1、需要导入vue3支持的该版本插件

npm add vue-grid-layout@3.0.0-beta1

2、在mian.js里引入：

import VueGridLayout from ‘vue-grid-layout'

加入：.use(VueGridLayout)
createApp(App).use(axios).use(router).use(VueGridLayout).mount(‘#app’)

因为vue-grid-layout是vue2版本的 但自己用的是vue3版本，所以要安装vue3的依赖和相关配置

三、在IE上无法打开，并报错缺少：

主要原因就是第三方库的兼容性问题，把vue-grid-layout引入到vue.config.js文件下的transpileDependencies集合中:

module.exports = { ... transpileDependencies: ['element-ui', 'proxy-polyfill' , 'vue-grid-layout'], }

总结

到此这篇关于前端开发指南之vue-grid-layout使用的文章就介绍到这了,更多相关vue-grid-layout使用实例内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！