Vue Layout DIY：基于 Vue 和 Flex 的个性化布局

简介：
Vue Layout DIY是一款使用Vue框架和Flex布局技术开发的工具，用户可以轻松创建个性化的网页布局。它为前端开发者提供了极大的灵活性与创意空间。 vue-layout-diy 是一个基于 Vue 和 Flex 的自定义布局项目。 S 前缀代表 Sunflower 团队的命名空间。 ### 项目步骤 1. 使用 vue-cli@2.9.3 初始化项目： ```bash vue init webpack vue-layout-diy ``` 2. 根据团队代码规范配置 ESLint。 3. 完成基于 Flex 布局的组件 SGrid 和 SGridItem 的开发。 4. 引入 Element UI，完成 SEmpty 默认显示块的设计。 ### 异步组件与代码分离问题 在使用异步组件配合代码分离时遇到以下情况： - 如果以插件形式引入 s-empty，在开发模式下可以正常渲染；但在构建模式下无法正确加载。 - 在 main.js 中通过 Vue.component 直接注册则一切正常运行。 为了便于展示效果，将 build 后的 dist 文件夹内容复制到 demo 文件夹中，并调整资源路径。由于 demo 并非部署在 Web 服务器根目录，导致分离出的异步 JavaScript 文件无法找到正确的引用位置。 因此需要修改配置文件来解决这一问题。