In the previous tutorial, we created a new VueJS project using the vue-cli command, in this tutorial we're going to investigate what this has done and look into how we now use this project to create our WordPress theme. When you run the install vue-cli command it will install the project setup straight away for you so lets look at what it's done.
Project Root
At the project root we have the following files - .bablerc - Config for babel - .editorconfig - Configs to be used by editor - .eslintignore - What files for eslint to ignore - .eslintrc.js - Eslint rules - .gitignore - Git ignore file - .postcssrc.js - Post css config - index.html - The main HTML file for your app. - package.json - NPM packages - README.md - Project readme file
The folders we have in the project are
Build
The build folder is where we have all the files used to configure how webpack builds our project. Here you have the different environment settings for your production, development and testing environment. This is so you can have different settings depending on the function of the site, for example in production you'll want to minify all the CSS and JS files whereas in development you'll want to keep these full sized to help you debug. By default, this is how it's setup but if you want to change any of the settings this is where it's done. If you look inside the webpack.base.config.js you'll see the node entry.app which defines the main file the Vua application will use.
Config
The config folder has different files for the different environments again its development, production and testing. This is where you will put different config variables for each of the environments. In this example of building a WordPress theme, this is the location you'll put the different WordPress REST API settings. As we might need a different API URL to use for development and production. If you're using authentication on your API then it will be different on production than development.
SRC
This is the folder that has the main files for your application will be placed. The assets folder is the folder where webpack will drop in any assets it processes. Components folder is where you should place your VueJS component files I would recommend splitting these up into further logically subfolders. The router folder is where you will define all the routes for your application. Then we have our first Vue file App.vue which is the base Vue file for the application, this can be left unchanged as it should only really needs the router-view component inside it. The main.js file is the application main JS file and it's what kicks off the start off your application by instantiating the Vue component.
Static
This is where you'll store pure static files that aren't going to be generated by webpack.
Test
Included inside the project is the setup for mocha unit tests and nightwatchjs e2e tests. So you'll be able to split up this into two folders one for your unit tests and another for you end-to-end tests.