Npcink Blog
切换菜单

WP-VUE - WordPress 前后端分离博客主题

WP-VUE 是一款基于 Vue.js 开发的 WordPress 前后端分离博客主题，由开发者自学 Vue 后独立完成。主题采用 nodejs、axios、element-ui 等技术栈，具有文章收藏、点赞、自动加载等功能。目前版本部署复杂，不支持 SEO 优化，推荐尝鲜体验。安装需熟悉 vue-cli 和 npm，包含 WordPress 文件和 vue 文件两部分，需分别上传和配置。主题免费下载但问题解决需付费，开发者提供了详细的安装说明和域名配置指南。

最后更新于
本页目录5 节

WP-VUE 采用的是前后端分离设计，通过我自己写的 API 实现前端快速响应，这也是我写的第一个 vue 版本的 WordPress 主题，

从自学 vue.js 开始到这款 WordPress 主题开发上线，其中的也是波折不断，庆幸自己没有放弃吧！首先看看截图预览

28d08d4e37cff3b44900

注意

此主题目前部署复杂，且无法进行有利于 SEO 的操作，推荐尝鲜体验

主题大致介绍

  • 简单的博客布局

  • 包含登陆（暂未开发注册与社交登陆）

  • 用户中心（设置功能暂未完善）

  • 文章收藏、点赞、分享

  • 触底自动加载下一页

  • 文章发布、审核（使用：mavon-editor 编辑器）

  • 后台一键设置

  • 首页幻灯片

前端使用

  • nodejs >= 6

  • axios

  • element-ui

  • mavon-editor

  • vue

  • vuex

  • vue-router

  • qs

  • nprogress

  • ……

下载与安装

wp-vue 主题免费开发下载使用，解决相关问题需付费

安装 wp-vue 主题首先确保你熟悉 vue-cli 与 npm 相关知识

1、下载主题文件包并解压

67dfb0c66782bd777027

2、将“WordPress 文件”文件夹里的主题上传至 WordPress 后台

3、IDE 中打开“vue 文件”文件夹，并执行相关操作

  1. 终端打开，cd 到相关目录

  2. 执行：npm install

  3. 更改域名配置，打开 webpack.config.js，更改 devServer 下的 API 域名

  4. 打开 src/libs/axiosTool.js 并更改 axios.defaults.baseURL 默认的请求地址

  5. 开发模式（本地调试使用）：npm run dev

  6. 生产模式：npm run build，执行后即可打包文件

  7. 打包完成后会生成一个 dist 文件夹，将里面的所有内容上传即可

域名说明，你可以选择后台安装一个域名，也可以安装在一个域名下，安装完成后需配置静态规则

location / {
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}


location /api {
   proxy_pass https://yousite.com/api/v2;
}

补充

此主题使用较为复杂，可留言，