As the project manager 👨🏻💻 of our Make $pare Money 💰 project, I began to touch the front-end tasks for the first time today. Informed that we will use Vue.js in our front-end construction 🛠. In order to keep track of their process, I need to learn Vue.js at first! 😛
Introduce of Vue
Vue is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.
As one of the most popular front-end architecture, Vue.js enjoys many merits (merits here). 💗 You can also view some Vue examples here. 😊
Vue.js Set-up
It’s pretty simple to build a Vue.js environment on your Mac if you are familiar with stuff like node, homebrew … Let’s start now! 🎉
Upgrade your brew and node.
$ brew upgrade
$ brew upgrade node
Install Vue client.
$ sudo npm install -g vue-cli
$ vue -V
If you have version shown on your screen, congratulations, you have successfully install Vue! 🎉
Let’s create our first Vue project!
$ vue init webpack firstvueproject # you can change 'firstvueproject' to your project name!
As for the other dependent modules of the Vue project, we installed them separately according to the project requirements. You can set them like mine.
Well done! 👍Now we can see a project in our floder.
Now we will not take the structure into consideration. Let’s run our project now!
$ npm run dev
Open http://localhost:8080 on your browser, we have made our first Vue project!
Amazing!!! 🤣
I will going to tell some further tricks of Vue in the future! 😜