Reusable, Scalable and Easy to organize project using VueJS ( Part 1 )

If you have a preliminary understanding of VueJs concept and basic data operating procedures, you can try to start organizing VueJs file and folder architecture and classification, so that your team can achieve the consistency of coding development.

Before you kick start, make sure your vue-cli is already installed in your global environment or upgrade latest version if older.

OK, Let Start of my example project — 「Pear」

In project directory you want to start

vue init webpack pear

As I want to build a large scale and full package with vue-cli, so I choose Yes for vue-router, eslint…etc

After initial project, you need install basic package

npm install

After installation, open as editor

Setup SCSS environment

In a good develop environment, SCSS style technique is indispensable, so you need these 2 package — node-sass and sass-loader

npm install --save-dev node-sass sass-loader

OK, Basic initial package setup is ready, so….

npm run dev

Final result from the browser as below

But still not finished yet, a few minutes ago installed SCSS package, now go back to editor and open any one component file such as Hello.vue inside components folder, Let’s test SCSS environment !

look at the <style scoped> ... </style> this part

Modify to…

Then save it then go back to browser

Well, the SCSS seems like correct

Conclusion

In this Part 1, a few points have been done !

• Install vue-cli to global
• Initial setup using vue-cli
• Integrate SCSS technique to development

Part 2 ?

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 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-1-d08fa83b8581

Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-2-c7e82044d7fc

Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-3-ed8cba6b4dfe

To be Continue…