{"id":23691,"date":"2024-05-17T11:48:00","date_gmt":"2024-05-17T04:48:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/quick-tutorial-on-understanding-vue-js-basics-for-beginners\/"},"modified":"2024-09-14T12:17:33","modified_gmt":"2024-09-14T05:17:33","slug":"quick-tutorial-on-understanding-vue-js-basics-for-beginners","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/quick-tutorial-on-understanding-vue-js-basics-for-beginners\/","title":{"rendered":"Quick Tutorial on Understanding Vue JS Basics for Beginners"},"content":{"rendered":"

Quick Tutorial on Understanding Vue JS Basics for Beginners<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

One of the most popular and easy-to-learn JavaScript frameworks available today is Vue JS. Vue JS provides developers with an easy-to-use, versatile, and intuitive way to create dynamic and interactive online applications. We will cover the basics of Vue.js and how to get started with this framework in this tutorial. <\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

What is Vue JS<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"vue<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Vue.js is a Javascript framework for creating user interfaces and single-page applications (SPAs). Vue.js is also known as Vue and is spelled like the word view (\/vju:\/). Unlike some other monolithic frameworks, this one is designed from the ground up to be gradually adopted. <\/span><\/p>\n

In addition, this framework provides a number of features such as component-based architecture, reactive data binding, and tools for building scalable applications. Since rendering and element composition are the core capabilities, users need routing, state management, templates, build tools, and other tools to design more complex applications. Therefore, web developers looking for a lightweight and user-friendly solution to build high-quality online applications are attracted to Vue.js. <\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

How to Install Vue JS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t
    \n
  1. The first thing you should do before learning Vue.js is to install Node.js. To download the Node JS installer file you can <\/span>Click here<\/span><\/a>.
    \nSesuaikan tipe sistem operasi Windows Anda apakah menggunakan 64bit atau 32bit.
    \nKlik salah satu dan tunggu hingga proses download selesai. <\/span><\/li>\n
  2. Next, check whether your Node JS installation was successful or not. The way to do this is by using cmd. Open cmd by clicking the windows button then type cmd in the search menu. Right-click on the Command Prompt application then select Run as Administrator. Then, enter the following command to ensure your Node JS installation process is successful: <\/span>node -v<\/span><\/li>\n
  3. To avoid errors during the<\/span> Vue.js<\/span> installation process, clear the cache on cmd using the following command:<\/span> npm cache clean –force<\/span><\/li>\n
  4. Next, install<\/span> Vue.js<\/span> using the following command:<\/span> npm install -g @vue\/cli Make sure that during the install process you are connected to the internet. Because, the install process requires downloading files from the Vue.js resource in Node JS. Wait until the installation process is complete, as shown in the image below: <\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t\n\t\t
    \n\t\t\t
    \"install<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Create a Vue JS Project<\/h4><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t
      \n
    1. After completing the<\/span> Vue.js <\/span>installation, it would not feel complete if you did not immediately try to create a project using it.<\/span> Vue.js. First, go to the directory where you will store your Vue.js project. In this guide, we use the Local Disk directory: D. <\/span><\/li>\n
    2. Next, to create a new Vue.js project, simply run the following command into your Command Prompt. myproject is the folder name where the Vue.js project is stored, you can also use another name: <\/span>vue create myproject<\/span><\/li>\n
    3. Then, you will be asked to choose the installation option on the Vue CLI. There are two options, default and manually. In this guide, we use the default option. Because to adjust the project settings according to <\/span>Vue.js<\/span>.
      \nLalu tekan ENTER. <\/span><\/li>\n
    4. After that the project creation process will run. You need to wait until this process is complete. If the project creation process is successful, a message will appear <\/span>Successfully created project \u201cmyproject\u201d.<\/b><\/li>\n
    5. Next you need to enter the project directory. Use the command that was given when the installation process was complete. In this guide using the command: <\/span>cd myprojects<\/span><\/li>\n
    6. Once you are inside the project directory, run<\/span> Vue.js<\/span> using the following command:<\/span> npm run serve<\/span><\/li>\n
    7. Finally open your browser and access one of the IP \/ localhost in the image above. Then you will get a page view from Vue.js. <\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"vue<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t
      \n\t\t\t

      After that you can do the front-end development process of the website or application. <\/span>Also read: Angular JS, JavaScript Framework That Has Many Enthusiasts<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Quick Tutorial on Understanding Vue JS Basics for Beginners One of the most popular and easy-to-learn JavaScript frameworks available today is Vue JS. Vue JS provides developers with an easy-to-use, versatile, and intuitive way to create dynamic and interactive online applications. We will cover the basics of Vue.js and how to get started with this [...]","protected":false},"author":32,"featured_media":21116,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[685],"tags":[782,781,780],"class_list":["post-23691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-education","tag-definisi-vue-js-en","tag-install-vue-js-en","tag-vue-js-en"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/23691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=23691"}],"version-history":[{"count":0,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/23691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/21116"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=23691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=23691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=23691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}