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

WP-VUE采用的是前后端分离设计,通过我自己写的API实现前端快速响应

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

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

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

注意

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

主题大致介绍

  • 简单的博客布局
  • 包含登陆(暂未开发注册与社交登陆)
  • 用户中心(设置功能暂未完善)
  • 文章收藏、点赞、分享
  • 触底自动加载下一页
  • 文章发布、审核(使用:mavon-editor编辑器)
  • 后台一键设置
  • 首页幻灯片

前端使用

  • nodejs >= 6
  • axios
  • element-ui
  • mavon-editor
  • vue
  • vuex
  • vue-router
  • qs
  • nprogress
  • ……

下载与安装

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

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

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

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

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;
}

补充

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

相关推荐

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

TONY – VUE.JS单栏wordpress博客主题

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
国内主题

Rouse - 轻拟物复古WordPress主题

2021-1-22 10:39:00

国内主题

Wing - WordPress简洁双栏主题

2022-6-13 13:49:32

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 你好啊

    怎么下载

    • Muze

      现在补上了,可以试试哦

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索