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

目录

• 前言
• 效果图
• 一、vue中简单案例
• 1、安装组件 NPM
• 2、vue文件
• 二、vue3使用（vue文件）
• 1、需要导入vue3支持的该版本插件
• 2、在mian.js里引入：
• 三、在IE上无法打开，并报错缺少：
• 总结

前言

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 [email protected]

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使用实例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！