Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )
Edited — 「Capitalize the First Letter 」of Each Component (.vue) !
In the (Part 1) has been initialed setup successfully, If you have not ? Check this out — [Here]
Well, Before start the coding, First we need to define a 「Good Practice」 of folder structure, Although this is not perfect, not awesome, our purpose is make the project resusable, scalable, easy to maintenance !
Reusable ( At least use more than 1 time )
- UI Components (Button, Alert…etc)
- Helper function (Moment, Global Variables…etc)
Folder Classification ( Universal Project Scale )
- Components (UI Component)
- Pages (Page for place UI components)
- Assets (Image, External CSS stylesheet…etc)
- i18n (en_US, zh_CN…etc)
- Router (Single Page Application Usage)
- Helper (Use function at least more than 1 time)
- Service (API..etc)
- Store (State Management)
- Server or Middleware to backend (Cross Domain Origin…etc)
Structure Output
Expend
Collapse
Well, It seems like more easy to maintain structure in the future of Team Development to HAPPY develop together.
If you still do not understand its folder or files why put it here, please leave me a comment
VueJS Package ( Large Scale )
These packages are need to run npm script, xxx is refer to below list such as npm install vuex, npm install vuex-router-sync…etc
npm install xxx --save- Vuex (State Management)
- Vuex Router Sync (Vue Router of State Management)
- Vue head (Web Title of Single Page Application)
- Vue i18n (Internationalization)
- Axios (Promise based HTTP Client)
- Es6 Promise (A Polyfill for ES6 Style Promises)
- Fast Click (Polyfill to Remove Click Delays)
- Elements UI (Clean and Beatiful UI for VueJS)
Also you can npm install more package to extend the business logic requirement, but now is enough for initial usage
OK !
After installation package…
Do not forgot run dev to test !
npm run dev
Conclusion
In this Part 2, TWO Goals are completed !
- Grouping Reusable File
- Folder Structure Classification
- Installed Other Packages of VueJS
Part 3 ?
Has been released — Click 「Here」
Extended Study
Project Source (Git)
https://github.com/dc198689/pear
Dynamic Translate using vue-i18n ( VueJS )
https://medium.com/@t198689/dynamic-translate-using-vue-i18n-vuejs-c730093a63e2
Reusable, Scalable and Easy to organize project using VueJS ( Part 1 )
Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )
Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )
To be Continue…
