README

VueFront

适用于 Magento 的 CMS 连接应用程序

展示您的❤️ - 给我们一个⭐
帮助我们使这个项目变得更好！

VueFront 是一个由 VueJS 驱动 的 CMS 通用 SPA & PWA 前端，适用于您过时的博客和电子商务网站。

Magento 为数以千计的零售商和品牌提供最佳的电子商务平台和灵活的云解决方案，以快速创新和增长。

CMS 连接应用程序 - 通过 GraphQL API 在 Magento CMS 和 VueFront Web 应用程序之间建立连接。

它做什么？

这是一个连接 Magento CMS 与 VueFront Web 应用程序的 GraphQL API 的 Magento 模块。安装后，您将获得一个 CMS 连接 URL，您需要在 设置 期间将其添加到您的 VueFront Web 应用程序中。

演示

VueFront 在 Magento 上

Magento 博客（Megafan 博客模块）

由于 Magento 没有内置的博客，我们使用 Megafan 博客模块 自动添加博客支持。如果 Megafan 博客模块不可用，VueFront 将忽略它。

如何安装？

所需的 PHP 版本 >= 5.5, <= 7.2（此限制将在未来移除）

1. 通过 composer 快速安装（推荐）

我们建议您通过 composer 安装 VueFront 模块。它易于安装、更新和维护。

在 Magento 2 根目录下运行以下命令。

1.1 安装

composer require vuefront/module-vuefront
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

1.2 升级

composer update vuefront/module-vuefront
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

如果您的商店在产品模式下，请运行编译

php bin/magento setup:di:compile

2. 通过复制粘贴安装

如果您不想通过 composer 安装，可以使用这种方法。

• 在此处下载最新版本 [下载 master.zip]
• 将 master.zip 文件解压到 app/code/Vuefront/Vuefront；如果不存在，您应该创建路径 app/code/Vuefront/Vuefront。
• 转到 Magento 根目录并运行升级命令行以安装 Vuefront

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

通过 VueFront 部署服务将 VueFront Web 应用程序部署到 Apache 托管（静态网站）

（推荐）

1. 从本仓库安装 VueFront CMS 连接应用程序。
2. 登录或注册 VueFront.com 账户
3. 构建您的第一个 Web 应用程序
4. 激活新的前端 Web 应用程序（仅适用于 Apache 服务器）

通过 ftp 手动

1. 从本仓库安装 VueFront CMS 连接应用程序。
2. 登录或注册 VueFront.com 账户
3. 复制 CMS 连接 URL
4. 通过 ftp 在您的主机上的 OpenCart 网站根目录中创建一个新的文件夹 vuefront。
5. 通过命令行构建您的 VueFront Web 应用程序（更多信息）

yarn create vuefront-app
# When promote, provide the CMS Connect URL, which you coppied at step 3.
yarn generate

1. 将 dist 文件夹中的所有文件复制到新创建的 vuefront 文件夹中
2. 通过修改 .htaccess 文件，在 #RewriteBase /magento/ 规则后添加以下规则

# VueFront scripts, styles and images
RewriteCond %{REQUEST_URI} .*(_nuxt)
RewriteCond %{REQUEST_URI} !.*/vuefront/_nuxt
RewriteRule ^([^?]*) vuefront/$1
# VueFront sw.js
RewriteCond %{REQUEST_URI} .*(sw.js)
RewriteCond %{REQUEST_URI} !.*/vuefront/sw.js
RewriteRule ^([^?]*) vuefront/$1
# VueFront favicon.ico
RewriteCond %{REQUEST_URI} .*(favicon.ico)
RewriteCond %{REQUEST_URI} !.*/vuefront/favicon.ico
RewriteRule ^([^?]*) vuefront/$1
# VueFront pages
# VueFront home page
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html -f
RewriteRule ^$ vuefront/index.html [L]
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html !-f
RewriteRule ^$ vuefront/200.html [L]
# VueFront page if exists html file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html -f
RewriteRule ^([^?]*) vuefront/$1.html [L,QSA]
# VueFront page if not exists html file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
RewriteCond %{QUERY_STRING} !.*(rest_route)
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html !-f
RewriteRule ^([^?]*) vuefront/200.html [L,QSA]

将 VueFront Web 应用程序部署到 Nginx 托管（静态网站）

与 Apache 相同，但您需要自己添加服务器配置，并且 vuefront 文件夹的路径不同，为 ./pub/vuefront

（推荐）

1. 从本仓库安装 VueFront CMS 连接应用程序。
2. 登录或注册 VueFront.com 账户
3. 构建您的第一个 Web 应用程序
4. 现在您需要将此代码添加到您的 nginx.config 文件中，在 index 指令之后

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
   try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
}

通过 ftp 手动

1. 从本仓库安装 VueFront CMS 连接应用程序。
2. 登录或注册 VueFront.com 账户
3. 复制 CMS 连接 URL
4. 通过 ftp 在您的主机上的 Magento 网站中创建一个新的文件夹 ./pub/vuefront。
5. 通过命令行构建 VueFront Web 应用程序（了解更多）

yarn create vuefront-app
# When promote, provide the CMS Connect URL, which you coppied at step 3.
yarn generate

1. 现在您需要将此代码添加到您的 nginx.config 文件中，在 index 指令之后

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
   try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
}

支持

如需支持，请通过 Discord 联系我们

提交问题

要提交问题，请在 问题标签页 中创建一个问题。请记住提供关于您情况的详细说明以及重现问题的方法。

享受吧！