前后端分离主题WP-VUE

前言

其实按理说这款主题在去年就应该发布,可是无奈自己的时间真的太少了。

WP-VUE采用的是前后端分离设计,通过我自己写的API实现前端快速响应,这也是我写的第一个vue版本的Wordpress主题,从自学vue.js开始到这款Wordpress主题开发上线,其中的也是波折不断,庆幸自己没有放弃吧!首先看看截图预览

主题大致介绍

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

前端使用

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

预览地址

下载与安装

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

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

1、点击此处下载主题文件包并解压

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

演示帐户:demo

密        码:demo123456

若需要帮助,可以直接联系我

至此,全文完。开发不易,打赏一点心意🤔🤔🤔🤔

分享到:

一条来自火星网友的神评论

查看评论
4 Comments
      1. @vayne 期待期待、就喜欢这种极简得风格、出个收费的吧、必火。另外源代码上能否显示文章内容、毕竟做网站还是得靠搜索引擎的流量为主。