vue website page builder

免费点击和删除页面构建器

• 免费点击和删除页面构建器
  • 演示
  • 概述
  • 几分钟内开始
  • 关于
  • 现实世界应用程序示例
  • 评论，评分和用户推荐
  • 特征
  • 技术细节
  • 文档
  • 要求
  • 入门
  • 安装
  • 快速开始
    • 初始化页面构建器
    • NUXT 3集成
      • 创建一个NUXT插件
      • 注册插件
    • 为什么使用共享实例？
    • 使用页面构建器组件
  • 重要的是：CSS前缀（ pbx- ）
  • 在其他框架中渲染HTML输出（React，Nuxt等）
  • 为页面构建器提供配置
  • 页面构建器中的全面语言支持
    • 默认语言
    • 禁用语言下拉
  • 本地存储和自动保存
  • 检索最新的HTML内容以提交表单
    • 成功创建资源或更新后重置构建器
  • 将现有内容或组件加载到页面构建器中
    • 还原整页内容（全局样式和组件）
  • 自动选秀回收
  • 将页面构建器嵌入模式或对话框中
  • 发布按钮
  • 造型主页构建器容器
  • 下载HTML文件
  • 自定义组件
    • 自定义媒体库组件
    • 集成Unplash库
    • 自定义布局构建器组件
  • 故障排除
    • 字体或图标不显示
  • 页面建筑架构
    • 页面构建器的工作方式
  • 贡献
  • 安全漏洞
  • 取得自定义或任何问题的联系
  • 报告问题或请求功能
  • 反馈
  • 支持该项目
  • 执照

演示

VUE 3页构建器组件具有用于创建动态网页的拖放功能。

在任何后端创建和增强数字体验。

体验vue website page builder的功能和简单性。尝试实时演示以探索实时视觉更新和光滑的内容管理。

与页面构建器一起玩

概述

如果您是VUE 3开发人员，那么这个建筑商就会感觉到宾至如归。它通过NPM快速安装，并通过道具和配置对象支持完整的自定义。您甚至可以设置特定的用户设置，例如图像，名称，主题，语言，公司徽标和AutoSave首选项，使其成为每个用户的个性化体验。

轻巧，简约的页面构建器，具有优雅而直观的设计，专注于简单性和速度。

构建响应式页面，例如列表，作业或博客文章，并轻松管理内容。

几分钟内开始

易于设置和即时生产力。遵循快速启动指南以开始构建几个简单的步骤。

关于

专为增长而设计的页面构建器。使用现成的组件构建您的网站页面，这些组件可完全自定义并且始终响应，旨在满足所有需求。一个强大的页面建设者，用于成长的商人，品牌和代理商。它是完全免费的。

现实世界应用程序示例

从独奏自由职业者到快速发展的初创公司和建立企业，页面建造者都受到各地团队的信任。凭借其直观的点击和滴定编辑器，实时视觉编辑和丰富的可重复使用组件库，您可以在几分钟内将创意变成抛光页面。它是为商人，品牌和代理商建造的，它使任何人都能创建高影响力内容。

查找vue website page builder如何授权企业创建动态和响应迅速的网页。一个典型的例子是我本人。

评论，评分和用户推荐

这是用户对vue website page builder评价：

“改变我们业务的游戏规则”

“ vue website page builder已经完全改变了我们如何创建和管理我们的网站页面。点击式功能是直观的，实时编辑节省了我们这么多时间。强烈推荐！” –营销经理Sarah L.

“非常适合机构”

“作为一家代理商，我们需要一种灵活，快速且易于使用的工具。这个建筑商会打勾所有盒子。可重复使用的组件和响应式设计功能是巨大的优点！” –创意工作的创始人詹姆斯·R·

“令人印象深刻的功能和支持”

“建造者充满了功能，支持团队的响应速度令人难以置信。” –自由网络设计师Emily T.

“博客的必备品”

“我们将构建器用于博客。能够自定义每个细节的能力，同时保持页面响应速度令人惊讶。自切换到此工具以来，我们的销售量增加了！” –时尚的所有者艾哈迈德·K·

“非常适合初学者和专家”

“我不是开发人员，但是我能够在几分钟内创建一个看起来像专业的页面。界面对用户友好，结果令人惊叹。” –小企业主Lisa M.

想分享您的经验吗？在此处提交您的推荐。

特征

包括：

• 页面构建器：单击＆Drop Page Builder。
• 可自定义的设计：自定义与您的品牌相匹配的外观。

页面构建器包含功能：

• 单击＆Drop ：轻松重新排列页面上的元素。
• 重新排序：更改内容的顺序而不会麻烦。
• 真实的视觉编辑：在您制作时，请参阅实时的更改。
• 媒体库：轻松注入您自己的自定义媒体库组件。
• 本地存储和自动保存：永远不要丢失您的工作 – 随着您的发展而改变。
• Unsplash ：Unplash集成。
• 响应式编辑：确保您的网站在所有设备上看起来都很好。
• 文本编辑：实时编辑文本内容。
• 字体自定义：选择完美的字体以匹配您的样式。
• 撤消和重做：自信地实验变化的能力。
• 全球样式：字体，设计和颜色的全球样式。
• YouTube视频：顺利集成视频内容。
• 下载HTML ：将整个页面导出为独立的HTML文件。
• 全局页面样式：在初始化时或在运行时动态定义，更新或清除主页包装器的全局样式。为动态的用户体验获得对字体，颜色，背景等的完全控制。
• 尾风支撑：与尾风CSS完全兼容（具有自动班级前缀以避免冲突）。
• 范围的样式：为了确保清洁和可预测的样式，构建器使用范围的样式隔离。构建器和您的应用程序之间没有风格冲突的风险。
• HTML编辑器：直接访问和编辑RAW HTML，以进行完整的自定义和开发人员级控件。

技术细节

• Technologies ：此页面构建器是使用Typescript，VUE 3，组成API，PINIA，CSS，CSS，TAIRWIND CSS和HTML开发的。
• 功能：单击＆Drop Page Builder。

文档

找到您需要入门，配置并掌握vue website page builder所需的所有内容。本节涵盖了安装，需求，快速启动，高级用法和集成技巧 – 因此您可以自信地构建和启动页面。

要求

请注意，这些说明假定您已安装了node.js。

• Node.js≥18.0.0
• vue.js≥3.0.0
• 具有ES6+支持的现代浏览器

入门

确保安装依赖项：

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

安装

Web构建器可用于令人惊叹的页面。使用户能够以任何规模设计和发布现代页面。

npm install @myissue/vue-website-page-builder

快速开始

短短几分钟内，使用vue website page builder开始运行并运行。本节将带您完成基本步骤（从安装到渲染第一页），因此您可以立即开始构建美丽，动态的内容。

初始化页面构建器

要开始使用页面构建器，请按照以下步骤：

• 在应用程序输入点（例如， main.ts或main.js ）中使用页面构建器插件。这为您的整个应用程序设置了共享构建器实例。
• 使用getPageBuilder() Composable访问应用程序中的共享构建器实例。
• 将CSS文件导入main.js ， main.ts或root组件，以确保正确的样式和自动图标加载。

 import { createApp } from \'vue\'
import App from \'./App.vue\'
import { pageBuilder } from \'@myissue/vue-website-page-builder\'
import \'@myissue/vue-website-page-builder/style.css\'

// Use the Page Builder plugin
const app = createApp ( App )
app . use ( pageBuilder )
app . mount ( \'#app\' )

注意：您只需要一次导入CSS文件即可。如果您已经在应用程序条目中导入它，则无需在单个组件中再次导入它。

注意：页面构建器被实现为单例服务。这样可以确保所有页面构建逻辑和状态均由您的整个应用程序中的一个共享实例管理。

NUXT 3集成

要在NUXT 3项目中使用@myissue/vue-website-page-builder ，请按照以下步骤操作：

创建一个NUXT插件

 import { defineNuxtPlugin } from \'#app\'
import PageBuilder from \'@myissue/vue-website-page-builder\'
import \'@myissue/vue-website-page-builder/style.css\'

export default defineNuxtPlugin ( ( nuxtApp ) => {
  nuxtApp . vueApp . use ( PageBuilder )
} ) 

注册插件

 export default defineNuxtConfig ( {
  plugins : [ \'~/plugins/page-builder.client.ts\' ] ,
} )

为什么使用共享实例？

通过始终访问共享实例，您可以避免创建构建器的多个孤立的副本。这样可以防止数据不一致，同步问题和不可预测的行为。所有组件和模块都与同一集中式服务进行交互，以确保您的应用程序中无处不在更新和状态更改。

使用页面构建器组件

确保设置以下配置选项：

• formType （必需）：指示您是在创建还是更新资源。这用于从本地存储中检索正确的内容。

• formName （必需）：指定资源类型（例如， article ， jobPost ， store等）。

< script setup>
import { PageBuilder , getPageBuilder } from \' @myissue/vue-website-page-builder \'
import \' @myissue/vue-website-page-builder/style.css \'

const configPageBuilder = {
  updateOrCreate : {
    formType : \' create \' ,
    formName : \' article \' ,
  },
}

const pageBuilderService = getPageBuilder ()
const result = await pageBuilderService . startBuilder (configPageBuilder)

console . info ( \' You may inspect this result for message, status, or error: \' , result)
</ script >

< template >
  < PageBuilder />
</ template >

重要的是：CSS前缀（ pbx- ）

页面构建器生成或处理的所有CSS类（包括尾风实用程序和您的自定义类）都将自动贴有pbx-的前缀。这样可以确保构建器的样式永远不会与应用程序现有的CSS或尾风设置发生冲突。这样可以防止全局样式泄漏到构建器中，反之亦然，这对于将构建器嵌入较大的应用程序或白色标签环境至关重要。

这对您有何影响？

当用户将组件添加到页面构建器中时，该组件中的所有类都会自动以pbx- （例如， pbx-button ， pbx-container ）前缀，以确保样式隔离并避免冲突。

注意：只需在项目中一次导入建筑商的CSS文件即可。所有构建器样式都是命名的，因此没有样式冲突的风险。

在其他框架中渲染HTML输出（React，Nuxt等）

您可以使用页面构建器生成HTML并在任何前端框架中渲染，例如React，Nuxt甚至服务器端应用程序。

为了确保正确的内容正确，只需在目标项目中安装页面构建器包并导入其CSS文件即可。所有的建筑商和尾风式的样式都将自动应用。

 import \'@myissue/vue-website-page-builder/style.css\'

即使您使用dangerouslySetInnerHTML ， v-html或类似方法将其渲染，这将应用于构建器的所有HTML输出。

示例（react）：

 import \'@myissue/vue-website-page-builder/style.css\'

function MyPage ( { html } ) {
  return < div dangerouslySetInnerHTML = { { __html : html } } />
}

示例（nuxt/vue）：

< script setup>
import { ref } from \' vue \'
import \' @myissue/vue-website-page-builder/style.css \'

const rawHtml = ref ( \' <p>This is content from the page builder.</p> \' )
</ script >

< template >
  < div v-html = \" rawHtml \" ></ div >
</ template >

注意：如果您只想渲染HTML，则无需导入任何VUE组件。只需导入CSS文件即可。

为页面构建器提供配置

下面的示例演示了启动构建页面的设置，并提供可用于自定义和品牌的其他选项。

您的configPageBuilder对象可以包括：

• formType （必需）：用于从本地存储中检索正确的内容。指定您是创建还是更新资源。
• formName （必需）：资源类型（例如， article ， jobPost ， store等）。这对于支持多种资源类型的平台特别有用，使构建器可以独特地管理每个资源的布局和存储。
• resourceData （可选）：预填充构建器具有初始资源数据（例如， title ， id ）。
• userForPageBuilder （可选）：传递用户信息（例如name和image ），以在构建器中显示登录用户的详细信息。
• pageBuilderLogo （可选）：在构建器工具栏中显示您的公司徽标。
• userSettings （可选）：设置用户首选项，例如主题，语言或自动保存。
• brandColor （可选）：为关键UI元素（ settings配置）设置品牌的主要颜色。

< script setup>
import { getPageBuilder } from \' @myissue/vue-website-page-builder \'

const configPageBuilder = {
  updateOrCreate : {
    formType : \' create \' , // Set to \'create\' or \'update\'
    // Set the resource type for better local storage and multi-resource support
    formName : \' article \' ,
  },
  resourceData : {
    title : \' Demo Article \' ,
    id : 1 ,
  },
  userForPageBuilder : { name : \' John Doe \' , image : \' /jon_doe.jpg \' },
  pageBuilderLogo : {
    src : \' /logo/logo.svg \' ,
  },
  userSettings : {
    theme : \' light \' ,
    language : \' en \' ,
    autoSave : true ,
  },
  settings : {
    brandColor : \' #DB93B0 \' ,
  },
}

// Retrieve Page Builder service instance
const pageBuilderService = getPageBuilder ()
const result = await pageBuilderService . startBuilder (configPageBuilder)

console . info ( \' You may inspect this result for message, status, or error: \' , result)
</ script >

< template >
  < PageBuilder />
</ template >

页面构建器中的全面语言支持

页面构建器提供了强大的多语言支持，使您可以轻松吸引全球受众。默认情况下，它支持以下语言，这些语言是为了广泛使用和强大的开发人员社区：

默认语言

您可以为项目设置默认语言：

 userSettings : {
  language : {
    default : \'en\' ,
  } ,
} ,

如果您只想提供这些语言的子集供用户在之间切换，请使用enable选项指定它们。

如果您不提供enable数组，则页面构建器默认将默认显示所有受支持的语言。

 userSettings : {
  language : {
    default : \'en\' ,
    enable : [ \'en\' , \'zh-Hans\' , \'fr\' ] ,
  } ,
} , 

禁用语言下拉

如果要从UI完全隐藏语言选择器（例如，只有一种语言或想要固定的语言），只需将disableLanguageDropdown设置为true即可。

即使禁用下拉列表，默认语言仍将自动应用。这使您可以完全控制本地化，同时为用户保持界面简单。

 userSettings : {
  theme : \'light\' ,
  language : {
    default : \'en\' ,
    disableLanguageDropdown : true ,
  } ,
} ,

这种灵活性使您可以根据受众的需求量身定制语言体验。

本地存储和自动保存

页面构建器自动将所有更改保存到浏览器的本地存储中。每次添加，编辑或删除组件时，都会保留进度，即使您关闭浏览器或导航。

• 自动保存：工作时会定期保存更改。
• 手动保存：单击“保存”按钮还存储当前状态。

检索最新的HTML内容以提交表单

构建器的自动保存确保本地存储中的数据始终反映您页面的最新状态。您可以随时检索此数据以进行表单提交，发布或预览。

要获取最新的内容，请使用保存时使用的相同resourceData （例如formType和formName ）。如果这些值不匹配，则构建器可能找不到预期的内容。

例子：

 const configPageBuilder = {
  updateOrCreate : {
    formType : \'create\' ,
    formName : \'article\' ,
  } ,
}

当您需要提交或保存构建器的输出时，请致电此逻辑，例如，当用户单击“保存”或“发布”时。下面的代码安全检索并从本地存储中解析了最新数据，处理错误并将结果分配给您的表单字段。

< script setup>
import { getPageBuilder } from \' @myissue/vue-website-page-builder \'

const configPageBuilder = {
  updateOrCreate : {
    formType : \' create \' ,
    formName : \' article \' ,
  },
}

// Retrieve Page Builder service instance
const pageBuilderService = getPageBuilder ()
await pageBuilderService . startBuilder (configPageBuilder)

const storedComponents = pageBuilderService . getSavedPageHtml ()
yourForm . content = storedComponents
</ script >

成功创建资源或更新后重置构建器

成功创建或更新了使用页面构建器的资源（例如帖子，文章或列表）之后，清除DOM和构建器的草稿状态以及删除相应的本地存储条目非常重要。这样可以确保下次为新资源打开建造商时，旧草稿不会出现。

您可以重置页面构建器的Live Dom，Builder State，并用以下方式清除草案：

 await pageBuilderService . handleFormSubmission ( )

在成功的帖子或资源更新后，请务必调用此方法，以确保用户下次创建或编辑资源时，将从新鲜的构建器开始。

将现有内容或组件加载到页面构建器中

页面构建器使加载先前发布的内容（包括您页面的全局样式和所有组件）变得简单，从任何后端源（例如您的数据库或API）。

还原整页内容（全局样式和组件）

如果您以前保存或发布了HTML内容（例如，从数据库中），可以轻松地恢复两个全局页面样式（类，内联样式）和所有用于无缝编辑的构建器组件。

推荐的工作流程：

1. 使用构建器的助手方法来解析保存的HTML，以提取组件和全局页面设置：

    // yourPageHTML: the full HTML string previously saved from the builder
   const { components , pageSettings } = pageBuilderService . parsePageBuilderHTML ( yourPageHTML )

2. 直接在您的配置对象中传递pageSettings ，然后将components数组作为第二个参数传递到startBuilder ：

   < script setup>
   import { getPageBuilder } from \' @myissue/vue-website-page-builder \'
   
   // Retrieve the Page Builder service instance
   const pageBuilderService = getPageBuilder ()
   
   // Parse your saved HTML to extract both components and global page settings
   const { components , pageSettings } = pageBuilderService . parsePageBuilderHTML (yourPageHTML)
   
   // Prepare the config, passing pageSettings directly
   const configPageBuilder = {
     updateOrCreate : {
       formType : \' update \' , // important: set to update
       formName : \' article \' ,
     },
     // pass directly, not nested
     pageSettings : pageSettings,
   }
   
   // Start the builder with both config and components
   const result = await pageBuilderService . startBuilder (configPageBuilder, components)
   
   console . info ( \' You may inspect this result for message, status, or error: \' , result)
   </ script >
   
   < template >
     < PageBuilder />
   </ template >

笔记：

• 每个组件的html_code必须包裹在A <section>...</section>标签中。这就是页面构建器定义和分开各个组件的方式。
• 始终在配置对象中直接传递pageSettings （不是{ pageSettings: { pageSettings } } ）。
• 设置formType: \'update\' ，以确保构建器加载您提供的内容进行编辑。

这种方法可确保您的用户可以无缝恢复和编辑先前发布的内容（包括所有全局样式和布局），为现有页面提供了平稳可靠的编辑体验。

自动选秀回收

页面构建器会在本地存储中自动检查未保存的草稿以获取当前资源。如果找到了草稿，请提示用户继续将其关闭的位置继续或使用从您的后端加载的版本。

• formType （必需）：确定从本地存储中加载的草稿。根据您的用例，将其设置为在updateOrCreate配置中create或update 。
• formName （必需）：在updateOrCreate配置中指定资源类型（例如， article ， jobPost ， store等）。如果您的平台支持多种资源类型，这一点尤其重要。通过提供唯一的名称，页面构建器可以正确管理每个资源的布局和草稿，从而使用户可以在停止的位置接收。

< script setup>
import { getPageBuilder } from \' @myissue/vue-website-page-builder \'

const configPageBuilder = {
  updateOrCreate : {
    formType : \' update \' ,
    formName : \' article \' ,
  },
}

const result = await pageBuilderService . startBuilder (configPageBuilder)

console . info ( \' You may inspect this result for message, status, or error: \' , result)
</ script >

< template >
  < PageBuilder />
</ template >

将页面构建器嵌入模式或对话框中

您可以轻松地使用模式或对话框内的页面构建器。要允许用户从构建器内部关闭模态，请使用showCloseButton Prop并收听@handleClosePageBuilder事件：

< script setup>
import { ref } from \' vue \'
import { PageBuilder } from \' @myissue/vue-website-page-builder \'

const showModal = ref ( true )
function closePageBuilder () {
  showModal . value = false
}
</ script >

< template >
  < Modal v-if = \" showModal \" @close = \" showModal = false \" >
    < PageBuilder :showCloseButton = \" true \" @handleClosePageBuilder = \" closePageBuilder \" />
  </ Modal >
</ template >

发布按钮

要允许用户使用构建器内部的发布按钮，请使用showPublishButton Prop并收听@handlePublishPageBuilder事件。

注意：单击发布按钮时，页面构建器将在发出@handlePublishPageBuilder事件之前自动保存对本地存储的最新更改。这样可以确保您始终收到最新的内容。

< script setup>
import { getPageBuilder , PageBuilder } from \' @myissue/vue-website-page-builder \'

const pageBuilderService = getPageBuilder ()

const handlePublish = () => {
  // Retrieve the latest HTML content (saved by the builder)
  const latestHtml = pageBuilderService . getSavedPageHtml ()
  // Submit, publish, or process the content as needed
  // e.g., send latestHtml to your API or update your form
}
</ script >

< template >
  < PageBuilder :showPublishButton = \" true \" @handlePublishPageBuilder = \" handlePublish \" />
</ template >

• :showPublishButton=\"true\" – 在页面构建器工具栏中显示一个发布按钮。
• @handlePublishPageBuilder=\"handlePublish\" – 在构建器自动储备后发出，因此您始终获得最新的内容。

提示：您可以将您喜欢的任何内容命名。这种模式使将构建器嵌入模式，对话或叠加层中的任何VUE应用程序都很容易。

造型主页构建器容器

页面构建器允许您随时为主包装器（ #pagebuilder ）定义和更新全局样式。这些设置控制着整体外观，包括字体系列，文本颜色，背景颜色等。无论您是最初将它们设置在配置中还是在运行时动态更新，您的更改都会在所有部分中立即反映。

使用pageSettings Config将自定义CSS类和内联样式应用于页面构建器的主要包装器。页面构建器渲染包裹在单亲容器中的所有组件， <div id=\"pagebuilder\"> 。您可以通过在配置中添加一个pageSettings对象来将全局CSS classes和style传递给该包装器：

 const configPageBuilder = {
  // other config options...

  pageSettings : {
    classes : \'max-w-screen-lg mx-auto px-4 bg-white\' ,
    style : {
      backgroundColor : \'red\' ,
      border : \'6px solid yellow\' ,
    } ,
  } ,
} as const

您可以随时完全控制页面的外观 – 一定要覆盖或清除整个页面的全局样式，以确保无缝且动态的用户体验。

下载HTML文件

将整个页面导出为独立的HTML文件。这包括所有部分，内容和应用样式，使文件准备好或在其他地方进行集成。

• 除非将其URL正确前缀或完全合格，否则图像可能无法正确显示在导出的HTML中。

为了确保导出后正确渲染的图像，您必须在页面构建器配置中指定URL前缀。该前缀将在导出过程中添加到所有相对图像URL。

 const configPageBuilder = {
  imageUrlPrefix : \'https://yo*ur-*d*omain.com/uploads/\' ,
  // other config options...
} as const 

自定义组件

如果您想使用自己的组件（无论是根据应用程序的需求定制设计还是量身定制），则可以将它们直接注入构建器。

自定义媒体库组件

默认情况下，页面构建器不包括内置媒体库。

这是有意的 – 默认情况下，禁用了依赖图像的布局组件（例如图像块，英雄部分等）。在此状态下，只有辅助组件，例如容器，标题，文本和按钮。

您可以通过添加自己的媒体库来扩展页面构建器。轻松地注入您的媒体库组件，以根据您的应用程序的需求量调整构建器。

自定义组件设置指南学习如何逐步创建和集成自己的组件。

集成Unplash库

轻松地将Unsplash Image搜索添加到您的媒体库模式中，就像在演示中一样！提供了一个代码示例，以便您可以复制 – 开始。

在此处查看完整的逐步指南和工作演示代码： Unplash集成指南

自定义布局构建器组件

页面构建器配备了越来越多的内置组件，包括布局和辅助组件。这些默认值不断改进和扩展。

自定义组件设置指南学习如何逐步创建和集成自己的组件。

故障排除

字体或图标不显示

如果字体或材料图标未正确显示，请验证：

CSS导入：您正在导入CSS文件：

 import \'@myissue/vue-website-page-builder/style.css\' 

页面建筑架构

页面构建器被设计为用于动态页面内容的模块化，状态驱动的编辑器。它的体系结构将配置，状态管理和DOM交互分开，从而确保灵活性和可维护性。

页面构建器的工作方式

该页面构建器旨在易于使用，并且对于任何Web项目都可以灵活。这是幕后工作的方式：

• 首先配置：当您启动构建器时，您会通过配置（例如您要构建的类型的页面，用户信息，品牌和任何现有内容）。构建器立即