• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ramsaylanier/wordexpress-starter-vue: WordPress with Vue, GraphQL, and Node

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

ramsaylanier/wordexpress-starter-vue

开源软件地址(OpenSource Url):

https://github.com/ramsaylanier/wordexpress-starter-vue

开源编程语言(OpenSource Language):

Vue 69.1%

开源软件介绍(OpenSource Introduction):

WordExpress Starter - Vue (AKA VuePress)

WordPress development using Vue, GraphQL, and Express.

Read the Introduction to Vue Press

This repo is a starting off point for working with WordExpress using Vue. Its meant to work with WordExpress Server.

Node Version Requirement

node 6.*
node 7.*

Before Doing Anything Else

Please make sure you have cloned the WordExpress Server repo and have followed the instructions for getting it up and running. WordExpress server provides you with a connection to your WordPress database using GraphQL.

Config

Using the /config/sample-client.config.json file as an example, create a client.json file. As of now, this the config files just point to the url of where your WordExpress Server is running, and which theme in the src/themes directory to use.

Build Setup

yarn
yarn build
yarn start
=======
npm install
npm run build

Development Setup

yarn
yarn serve

Working With WordPress

First Steps

In a fresh WordPress install, you'll need to do a few basic setup items:

  • Create a page called 'Homepage'
  • Create a menu called 'primary-navigation'
  • Install Advanced Custom Fields plugin (see below)

Advanced Custom Fields

VuePress uses some custom post fields. You're best bet is to install the Advanced Custom Fields plugin into your WordPress backend. I've included am acf-export JSON file in this repo that you should import. This will give you just a few basic custom page fields that can be used to give your pages custom layout components.

Layout Components

Currently there are only three layout components - DefaultPage, PageWithHeader, and PostList. In order to set the layout component, simply type the name of the component in the custom field. If there is nothing in the layout component field, DefaultPage will be used.

PageWithHeader

In the backend:

screen shot 2017-12-19 at 8 54 27 pm

Result:

screen shot 2017-12-19 at 9 06 14 pm

PostList

In the backend:

screen shot 2017-12-19 at 9 10 04 pm

Result:

screen shot 2017-12-19 at 9 08 38 pm

License

MIT




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap