DEV Community

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

Posted on

3 1

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!
๐Ÿ™‹โ€โ™€๏ธ

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more โ†’

Top comments (3)

Collapse
 
khalby786 profile image
khaleel gibran โ€ข

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

Collapse
 
ljnce profile image
Luca โ€ข

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!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more