After learning the workflow for React with centralized state management (Redux), I found Vue.js to be a really fun way to work in JavaScript. The official documentation covers a lot, but IMO it doesn’t go into enough detail about how any serious projects will be built – with “Single-File Components“.
If you have a decent amount of JavaScript experience, you’ll want to use the Vue CLI.
I like to setup my main "entry file" or what defaults to main.js in the CLI like this:
import Vue from 'vue';
import AppLayout from './theme/AppLayout.vue';
import router from './router'; // assuming index.js in router directory using vue-router
import store from './store'; // assuming index.js in store directory using vuex
new Vue({
router,
...AppLayout,
store
}).$mount('#app');
This is used in lieu of what you’ll see throughout most of the docs:
new Vue({
el: '#app',
data: {}
});
We mount the Vue instance using … $mount(‘#app’) and can pass in objects that we want to be available globally throughout our project files. It’s common practice to include the router and a store instance (ignore if you’re not yet using Vuex). I use AppLayout as my base single file component so I’m working in the AppLayout component’s namespace.
Examples for each of the imported components are coming soon.