企业官网建设流程全解析

• 前端
• UI组件

本篇指南围绕 vue-grid-layout 的安装与项目集成展开，覆盖 NPM、Yarn 包管理器安装、Vue 组件局部/全局注册以及浏览器 UMD 直接引入三种方式，并辅以仓库源码印证（入口导出、构建产物与插件自动安装逻辑）。读者按本文操作后，即可在自己的 Vue 2 项目中快速接入可拖拽、可缩放的网格布局组件。

安装前的准备

vue-grid-layout 是一个面向 Vue.js 的网格布局组件库，提供可拖拽（Draggable）与可缩放（Resizable）的网格项（GridItem），其底层拖拽能力基于 interact.js 实现。仓库 package.json 中声明当前版本为 2.4.0，并注明支持 Vue 2.2+（详见 README.md）。

• 若项目使用Vue 2.1.10 及以下，需要回退到 2.1.3 版本；
• 若项目面向IE11 等旧浏览器，需要使用 2.3.12-legacy 分支的构建产物；
• 若项目基于 Vue 1，则需要 1.0.3 版本。

建议在新项目中直接使用当前版本，并确保 Vue 版本满足 2.2+ 的要求。

使用包管理器安装

NPM

npm install vue-grid-layout --save

--save会将依赖写入package.json的dependencies字段，便于项目在其他环境复现安装。

Yarn

yarn add vue-grid-layout

安装完成后，node_modules/vue-grid-layout下即包含可直接使用的构建产物。仓库 package.json 中声明：

• main: dist/vue-grid-layout.common.js—— CommonJS 格式，供 Node 环境与打包器（如 webpack、rollup）解析；
• unpkg: dist/vue-grid-layout.umd.min.js—— UMD 压缩版，供浏览器<script>直接引用。

也就是说，通过 NPM/Yarn 安装后，Vue CLI、webpack 等打包工具会依据main字段自动选取 CommonJS 版本完成编译。

导入并注册到 Vue 组件

安装完成后，在组件中导入整个库：

import VueGridLayout from 'vue-grid-layout';

库的默认导出同时包含GridLayout（网格容器）与GridItem（网格单元）两个组件。仓库入口文件 src/components/index.js 给出了明确的导出结构：

import GridItem from './GridItem.vue'; import GridLayout from './GridLayout.vue'; const VueGridLayout = { GridLayout, GridItem }

局部注册（推荐）

将两个组件注册到需要使用的 Vue 组件中：

export default { components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem }, // ... data, methods, mounted (), etc. }

注册之后，就可以在模板中使用<grid-layout>与<grid-item>标签构建布局。仓库演示应用 src/App.vue 展示了完整的注册与模板用法，可对照参考。

全局注册（可选）

除默认导出外，src/components/index.js 还实现了标准的 Vue 插件install方法：

export function install(Vue) { if (install.installed) return; install.installed = true; Object.keys(VueGridLayout).forEach(name => { Vue.component(name, VueGridLayout[name]); }); }

因此可以直接通过Vue.use()全局安装：

import Vue from 'vue'; import VueGridLayout from 'vue-grid-layout'; Vue.use(VueGridLayout);

之后任意组件模板中都可以直接使用grid-layout/grid-item，无需重复局部注册。该插件的install带有install.installed防重复注册保护，多次调用也不会产生副作用。

浏览器直接引入（CDN / 本地文件）

如果项目不使用打包器，可以直接引入浏览器版 UMD 包：

<script src="vue-grid-layout.umd.min.js"></script>

该产物由vue-cli-service build --target lib ./src/components/index.js构建（脚本见 package.json），并通过 vue.config.js 配置了library: "VueGridLayout"的全局变量名。因此引入后：

• 组件会自动可用，无需额外注册步骤；
• 全局对象window.VueGridLayout上可访问GridLayout与GridItem。

仓库入口 src/components/index.js 还内置了自动安装逻辑：当检测到全局window.Vue（浏览器）或global.Vue（Node 环境）存在时，会立即执行Vue.use(plugin)完成全局注册：

let GlobalVue = null; if (typeof window !== 'undefined') { GlobalVue = window.Vue; } else if (typeof global !== 'undefined') { GlobalVue = global.Vue; } if (GlobalVue) { GlobalVue.use(plugin); }

这意味着通过<script>顺序引入 Vue 与vue-grid-layout.umd.min.js后，两个组件即被自动注册到全局，模板中可直接使用。

注意事项：UMD 包体积较大且无 tree-shaking 优化，仅建议用于无需打包的页面或快速原型验证；正式工程仍推荐 NPM/Yarn 安装方式。

安装验证与快速上手

验证安装是否成功

安装后建议先运行一次单元测试验证环境正常，仓库配置了 Jest 测试脚本（package.json）：

npm run test:unit

测试用例 test/unit/GridItem.spec.js 通过shallowMount挂载GridLayout组件并断言渲染了.vue-grid-layout根节点，可用作集成的冒烟验证。

若需本地体验完整功能，可以运行演示应用：

npm install npm run serve

演示应用入口为 src/main.js 与 src/App.vue，包含拖拽、缩放、镜像、边界限制、响应式等开关演示。

最小可用示例

导入并注册组件后，即可按如下模板编写一个最简单的网格布局（完整示例见 website/docs/guide/usage.md）：

<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" > <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i"> {{item.i}} </grid-item> </grid-layout>

对应的layout数据是一个对象数组，每个对象以x、y、w、h描述网格项的坐标与尺寸，i为唯一标识：

data: { layout: [ {"x":0,"y":0,"w":2,"h":2,"i":"0"}, {"x":2,"y":0,"w":2,"h":4,"i":"1"}, {"x":4,"y":0,"w":2,"h":5,"i":"2"}, {"x":6,"y":0,"w":2,"h":3,"i":"3"}, {"x":8,"y":0,"w":2,"h":3,"i":"4"}, {"x":10,"y":0,"w":2,"h":3,"i":"5"} ] }

关键配置速查

对照仓库组件定义 src/components/GridLayout.vue，以下为常用 prop 及其默认值：

layout是唯一必填 prop，这也是注册组件后运行模板前必须准备的数据。

常见问题

问：为什么import VueGridLayout from 'vue-grid-layout'后VueGridLayout.GridLayout未定义？

请确认安装的版本为 2.x 且项目 Vue 版本 ≥ 2.2。仓库当前版本 2.4.0 的默认导出结构即{ GridLayout, GridItem }（见 src/components/index.js），不存在该对象则说明引入的产物版本不匹配。

问：浏览器直接引入后组件没有生效？

UMD 包的自动安装依赖全局window.Vue，请务必在vue-grid-layout.umd.min.js之前引入 Vue 本身。若采用异步或延迟加载，则需显式调用window.VueGridLayout上的组件完成注册。

问：项目在构建时提示找不到dist目录下的产物？

NPM 包发布时已包含构建产物，正常安装即可使用；若在仓库源码层面自行开发调试，需要先执行npm run build-lib（构建命令见 package.json）生成dist/目录。

结语

vue-grid-layout 提供了 NPM、Yarn 与浏览器 UMD 三种对等且互补的引入路径：打包型项目使用包管理器 + 局部/全局注册，轻量页面使用<script>直接引入。配合仓库中 src/components/index.js 的插件式导出与 src/App.vue 的完整演示，开发者可以快速完成安装、注册并投入网格布局的实际开发。

• 前端
• UI组件