The best structure for building a new project with Vuejs

What we will do when we start a new project with Vuejs? And what we need to prepare before start it?
The first, we need to create a best structure and apply it from begining. If we start from scratch, we will spend a lot of time for prepare and create a best structure.

But what's a best structure? Don't worry, I created a Vuejs source basic example already, it may help you start a new project with Vuejs faster, better structure and it's good approach for Vuejs newbie. View the resource here

So, what we have in the Basic Vuejs source code template?

Structure:

-src
--assets
----images
----icons
----...
--components
----#Common components (Loading, Buttons, H1, H2...)
--configs
----#Common configs
--containers
----#Main Screens/ Main Views (App, Home, Login, Signup, Production...)
--layouts
----#The wrapped components (Sidebar, Header, Footer...)
--mixins
----#Contain all your mixins
--plugins
----#Plugin's and external library's configs
--utils
----Contain all of the util files
--...


Structure for a component container:

-app/containers/YourComponentContainer
---YourComponentContainer
---services
-----#index.js
-----#api.js
-----#constants.js
-----#getters.js
-----#mutations.js
-----#storeModule.js
-----#...
---styles
-----#index.css
-----#SubComponent.css
-----#...
---index.vue
---SubComponent.vue
---...


In this structure, we separated all of the logics (services folder) and style files (styles folder) and put inside their folder. The Vue just contain what they need to rendering.

Why we do that? You can see that the structure is very clearly and so easy for management and maintenance. Each file or folder have been created with their purpose, this make code structure less complexity.

Performance: Usually, we implement all store module into a main store file in root app and load all of them at the first time loading page, the performance may affect with this.
So in this Basic Vuejs template, the logic code will be inject when the component created and remove if it's unnecessary run on background when component destroyed.

Please check the /src/containers/TodoList/index.vue file to see how we do that

import { registerStoreModule, unregisterStoreModule } from '../../mixins';

...

export default {
  mixins: [registerStoreModule, unregisterStoreModule],
  created() {
    this.registerStoreModule('todoList', storeModule);
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  },
  destroyed() {
    this.unregisterStoreModule('todoList');
  }
};


What we implemented already:

- Template with Vuetify.
- Handle routes with vue-router.
- API async with vuex
- SASS and CSS supported.
- Eslint supported

Let we start now:

- Clone the Basic Vuejs template I have created:
git clone https://github.com/hieuht2048/vuejs-basic-source-code-template YOUR_PROJECT_NAME


- Move to the appropriate directory:

cd YOUR_PROJECT_NAME


- Install all Node packages:

yarn install


- Compiles and hot-reloads for development:

yarn serve


- Compiles and minifies for production:

yarn build


- Lints and fixes files:

yarn lint


To start this project with your purpose, please run and view the example components and code structures first, then make your component follow by what we done.

csshtmljavascriptvuejs

© 2019 4codev

Created with love by Sil.