WP Vue 项目技术文档

WP Vue 项目技术文档

wp-vue A simple Vue blog template that displays posts from any WordPress REST API endpoint. 项目地址: https://gitcode.com/gh_mirrors/wp/wp-vue

安装指南

1. 克隆项目

首先，你需要将项目克隆到本地。你可以使用以下命令：

git clone https://github.com/alexmacarthur/wp-vue.git

2. 安装依赖

进入项目根目录，并安装所需的依赖包：

cd wp-vue
npm install

项目的使用说明

1. 设置环境变量

在项目根目录下，复制 .env.sample 文件并重命名为 .env.local，然后在其中定义以下环境变量：

• REST_ENDPOINT：WordPress REST API 的端点，不要包含末尾的斜杠。例如：https://blah-blah-blah.com/wp-json/wp/v2
• POSTS_PER_PAGE：每页显示的默认文章数量。
• GA_TRACKING_ID：Google Analytics 跟踪 ID。
• REQUEST_CACHE_MAX：内存中缓存的 AJAX 请求的最大数量。

2. 本地运行

运行以下命令以在本地启动项目：

npm run serve

3. 生产环境构建

运行以下命令以构建生产环境版本：

npm run build

4. 部署到 Netlify

如果你需要托管你的项目，Netlify 是一个非常好的选择。你可以点击以下按钮直接部署到 Netlify：

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/alexmacarthur/wp-vue)

项目API使用文档

1. 缓存机制

WP Vue 默认会在本地缓存 AJAX 请求，并在需要时加载它们。首次加载页面时，当前页面和相邻页面的所有查询文章都会被缓存，以便快速访问。

为了防止缓存失控，设置了一个最大请求缓存值。一旦缓存达到此最大值（无论每个请求的大小如何），内存中的第一个请求将被删除，以便为新请求腾出空间。因此，你不必担心在浏览文章时会存储大量数据。

手动刷新页面将清除缓存，缓存不会持久化。

2. 通过URL参数设置端点

如果你想分享一个使用不同端点的 WP Vue 版本，可以通过 URL 参数传递该端点：

示例：https://wp.netlify.com?endpoint=https://css-tricks.com/wp-json/wp/v2

这将使用你在 URL 中提供的端点，而不是默认的端点。

项目安装方式

1. 使用 Vue CLI 创建项目

WP Vue 项目是使用 Vue CLI 创建的。如果你还没有安装 Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

2. 克隆并安装依赖

按照上述“安装指南”中的步骤，克隆项目并安装依赖。

3. 配置环境变量

按照“项目的使用说明”中的步骤，配置环境变量。

4. 本地运行与构建

按照“项目的使用说明”中的步骤，在本地运行项目并构建生产环境版本。

5. 部署到 Netlify

按照“项目的使用说明”中的步骤，将项目部署到 Netlify。

wp-vue A simple Vue blog template that displays posts from any WordPress REST API endpoint. 项目地址: https://gitcode.com/gh_mirrors/wp/wp-vue