The latest articles on DEV Community by Justin Wash (@justinwash). https://dev.to/justinwash https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F168360%2F33bf2526-e7f3-46b0-88a4-e02c262e42ed.jpeg https://dev.to/justinwash en Justin Wash Tue, 21 May 2019 14:30:52 +0000 https://dev.to/justinwash/client-side-vue-js-for-node-less-spas-1dap https://dev.to/justinwash/client-side-vue-js-for-node-less-spas-1dap <p>This is the structure I'm using for my most recent project, <a href="https://www.perpetualshred.com/">Perpetual Shred</a>. It's fast, easy to use, and allows for the front-end to be hosted as a static site.</p> <p><a href="https://client-side-vue.herokuapp.com">Demo</a></p> <p><a href="https://github.com/justinwash/client-side-vue">GitHub</a></p> <h2> Structure of the project: </h2> <h4> client-side-vue/ </h4> <ul> <li> <strong>index.html</strong> - The entry-point for your Single Page App. Global dependencies via script tags (Vue, Vue-Router, Http-Vue-Loader, Axios) and a single #App element where the vue instance will be rendered.</li> <li> <strong>index.js</strong> - Where Vue.js, Vue-Router are instantiated, where you'll import and assign your services to the Vue instance.</li> <li> <strong>index.css</strong> - Global styles for your Single Page App.</li> <li> <strong>index.php</strong> - Trick Heroku into hosting a static site.</li> </ul> <h4> client-side-vue/dependencies/ </h4> <ul> <li> <strong>vue.js</strong> - Vue.js itself and all the built-in features that come with it.</li> <li> <strong>vue-router.js</strong> - The official router for Vue.js, allows you to navigate your Single Page App. </li> <li> <strong>http-vue-loader.js</strong> - Client-side .vue component loader.</li> <li> <strong>axios.js</strong> - Promise based HTTP client for making ajax/http calls.</li> </ul> <h4> client-side-vue/services </h4> <ul> <li> <strong>store.service.js</strong> - A (very, extremely) simple state-management service with only three methods: <ul> <li> <code>get(key)</code> </li> <li><code>set(key, value)</code></li> <li><code>clear(key)</code></li> </ul> </li> </ul> <h2> What's with the weird <code>Object.assignProperty</code> stuff in index.js?: </h2> <p>see <a href="https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/">this great article</a></p> vue javascript webdev node