Vue Project Getting Started

Getting Started

Flow of Code

All JavaScript frameworks have a unique flow of how they connect to each piece within the architecture of a project. Below is helpful step by step process as to how project pieces connect. The file names and/or directory structures are based on the current ProtoKit architecture, but many examples online will also follow a similar convention.

Step 1 - index.html All Vue applications start from the index.html file, usually located in the root of the project, public directory, or static directory. Within the index.html file, the Vue application will usually be linked to the element with the id of "app".

Step 2 - app.js Because we are using Webpack and not the Vue-CLI, the application is initialized using the app.js file. This JavaScript file is where the Vue application imports the other main libraries, such as the Router, Store, and the App.vue file. Using el: '#app' is how the index.html file connects to the Vue application.

Step 3 - App.vue This is the starting point of the Vue files, and is the first Vue component or view that is used for the application. ProtoKit keeps the App.vue file in the views directory. This file usually contains very little code and/or functionality in small to mid-sized applications, and is where the rounter-view component is included. A lifecycle hook is included here with the name of watch, which is where the $route function passes data to the Vue Router system included within app.js.

Step 4 - _router/routes.js The Router is what connects the App.vue to the rest of the views that you create, and where you specify what will be shown in the browser address bar. You are able to reference the path or the routes name property within the application, and it will load in the component that you have imported and referenced in the component property. By specifying history as the mode, you will remove the # from the address bar. Lastly, the individual views are imported as JavaScript constants with Fat Arrow function, which causes the application to Lazy Load the individual views. This decreases the initial download size of the JavaScript bundles required to load the application, and will only load those resources when that specific route is called.

Step 5 - views The views directory is what houses the individual "pages" of your application, but in reality, Vue understands all .vue files to be components. There is no difference between the .vue files in the views directory and other directories, such as components, partials, or layouts. In order to create an easily maintainable project structure, we only store the .vue files in the views directory that the Router uses. Based on your project needs, you could utilize the partials directory to house individual often used components, such as the header, footer, or main navigation system.

Step 5 - components While Vue considers all .vue files to be a "component", the components directory houses the various components created for use with the FPAC Design System. These individual components can be included in the views to quickly build applications with only the need to pass in specific data structures. The HTML and CSS classes are pre-configured within the component code or passed in as parameters in the component tag.