DEV Community

Cover image for Why Vue.Js is the best way? 5 advices for your choice ๐Ÿ“
Luca
Luca

Posted on

Why Vue.Js is the best way? 5 advices for your choice ๐Ÿ“

Hello Community! ๐Ÿ™Œ

Today i want to show you 5 advices for choose Vue.js like your Js Framework. It have a lot of features, but for me this is the best 5 for help you to know the "power" of Vue.

  1. Simply to use ๐Ÿ‘จโ€๐Ÿ’ป
  2. Vue CLI desktop/smartphone "live page refresh" ๐Ÿ’ป๐Ÿ“ฑ
  3. Router ๐Ÿšƒ
  4. Npm package ๐ŸŽ
  5. Easy to build โœ…

1๏ธโƒฃ Simply to use ๐Ÿ‘จโ€๐Ÿ’ป :

You know the base of HTML, CSS and Javascript? You are ready to use Vue.js.
Vue file is very simply and intuitive; you have:
Template where you can write your HTML,
Script where you can write your Js,
Style where you can write your CSS or SCSS lang


<template>
    <!-- Your HTML -->
</template>

<script>

export default {
    // Your JS
}

</script>

<style lang="css">
    /* Your CSS or SCSS */
</style>

Enter fullscreen mode Exit fullscreen mode

2๏ธโƒฃ Vue CLI ๐Ÿ’ป๐Ÿ“ฑ:

Install Vue CLI is the best way for you; itโ€™s awesome, and itโ€™s give to you all the file you need for your Vue app.


vue create hello-world

Enter fullscreen mode Exit fullscreen mode

Another trick? After run NPM RUN SERVE, when you you save your modify (CMND + S), you can see the change โ€œin liveโ€ without refresh you page every time.
Vue CLI give you easily way for see your change with a pc browser like โ€œLocal urlโ€, or via mobile like โ€œNetwork urlโ€.Alt Text

3๏ธโƒฃ Router ๐Ÿšƒ:

This is another awesome Vue feature; Vue created an easy way for navigate between the page: after install your router, you have need to set the route for you file.vue
Alt Text

And then set the router-link โ€œbuttonโ€ for navigate in this page.
Alt Text

4๏ธโƒฃ Npm package ๐ŸŽ:

You have a lot of package for install what you need; after install you need only to โ€œimportโ€ the element on your file.vue script or globally on your main.js, and you can use your favorite package!


<script>

import axios from 'axios';

</script>

Enter fullscreen mode Exit fullscreen mode
*In this case i used Axios

5๏ธโƒฃ Easy to build โœ…:

This is last step:


npm run-build

Enter fullscreen mode Exit fullscreen mode

After this command you can copy index.html and /dist/ folder into your website root directory, and itโ€™s Done, your first Vue site is online!

Hope this info help your on a choice of Js framework... In this case, VUE!
๐Ÿ™‹โ€โ™€๏ธ

Discussion (3)

Collapse
khalby786 profile image
Khaleel Gibran

You can also use Nuxt.js, which is also awesome!

Collapse
ljnce profile image
Luca Author

Thank you Khaleel; Nuxt.js is on my "study list"! ๐Ÿ˜ฎ

Collapse
khalby786 profile image
Khaleel Gibran

It's not too hard, you'll enjoy it!