Skip to content

Documentation

Jump to bottom
Evan Agee edited this page May 29, 2019 · 4 revisions

Welcome to the vuejs-wordpress-theme-starter wiki!

This will serve as a centralized location for docs related to getting your project up and running with this starter as quickly as possible. Hopefully we'll cover a few edge cases along the way as well.

Video Training

New to Vue?

Not sure where to begin? The Vuejs documentation is actually amazing, but if you're looking for video training I highly recommend the free Learn Vue 2: Step By Step course over at Laracasts. There's also a great playlist by Academind available on YouTube that covers pretty much everything you'd want to know about building a fully-featured Vue app.

I've created a couple of example components in src/components/widgets to give you an idea of how to work with the Vuex store data.

If you're new to Vue/Vuex I would do the following:

  • Open up src/app.js this is the main JS file for the app and will give you a glimpse into what's going on behind the scenes.
  • Next open up src/App.vue this is the primary app component, a page wrapper of sorts. It contains the header/footer and the <router-view> component which is what loads in all of the other screens as you navigate around the app. Note that by default src/components/Home.vue is loaded into the router-view initially.
  • Next open up src/routes/index.js and notice how the routes are setup by default. Out of the box there is only one route, the / or home view. For more information on setting up routing within your app checkout Vue-Router.
  • Next is the Vuex store. I won't cover how that works here as it's a tiny bit more advanced. Check out all files in src/store and start to familiarize yourself with what's going on. It's based on the official Vuex example project setup and uses Vuex modules. By default I've included a couple of modules I thought you might need.

The first thing you're probably going to want to do is start editing and components in src/components/.

Code Organization

All of the code you're going to edit is located in /src/. From there it's broken into a few logical directories.

  • /src
    • /api for API requests
    • /assets for images mostly
    • /components Vue components
    • /router vue-router directives
    • /store vuex store and modules
    • /assets/css CSS styles
    • /vendor 3rd party scripts and libraries

All scripts and styles in /src are compiled down to the /dist directory, which is what you will deploy. When you're ready to deploy don't deploy the src/ directory.

External References

Features coming soon:

  • More documentation
Clone this wiki locally