Web Designer 开源项目教程

1. 项目介绍

Web Designer 是一个基于 Vue 的网页设计器图形化工具，允许用户通过拖拽组件进行页面排版和生成页面代码。该项目内置了 Element UI 组件库，支持一键生成网页代码，并支持二次开发。用户可以通过拖拽左侧组件图标到中间画布区进行页面排版，设计区右侧面板可以对组件属性进行设置。

2. 项目快速启动

2.1 环境准备

• Node.js (至少 v8.x)
• npm 或 yarn

2.2 安装步骤

1. 克隆项目

   git clone https://github.com/xiaoai7904/web_designer.git
   cd web_designer
   

2. 安装依赖

   npm install
   

3. 启动设计器后台服务

   cd server/
   npm install
   npm run dev
   

4. 启动设计器前端

   npm run serve
   

2.3 访问项目

启动成功后，打开浏览器访问 http://localhost:8080 即可进入 Web Designer 设计器界面。

3. 应用案例和最佳实践

3.1 创建一个简单的页面

1. 拖拽组件：从左侧组件列表中拖拽一个按钮组件到中间画布区。
2. 设置属性：在右侧属性面板中设置按钮的文本、颜色和大小。
3. 预览页面：点击右侧顶部的预览按钮，查看页面布局效果。
4. 保存页面：点击保存按钮，数据将保存在本地浏览器的 localStorage 中。

3.2 生成页面代码

1. 发布页面：点击右侧顶部的发布按钮，调用设计器后台服务生成页面代码。
2. 查看代码：生成完成后，项目根目录下会生成 runtime/vue_cli_3-x-master 文件夹，里面的代码可以进行二次开发。

4. 典型生态项目

4.1 Vue CLI

Web Designer 项目基于 Vue CLI 3.x 版本开发，Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue.js 项目。通过 Vue CLI，开发者可以轻松管理项目的依赖、配置和构建。

4.2 Element UI

Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件，如按钮、表单、表格等。Web Designer 内置了 Element UI 组件库，用户可以直接使用这些组件进行页面设计。

4.3 Egg.js

Egg.js 是一个为企业级框架和应用而生的 Node.js 框架，Web Designer 的后台服务使用了 Egg.js 来处理页面生成和代码生成的逻辑。Egg.js 提供了强大的插件机制和丰富的生态系统，适合构建复杂的 Web 应用。

通过以上模块的介绍，您可以快速上手并深入了解 Web Designer 开源项目。