CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

28 December, 2020

Vue.js Tutorial

 Programing Coderfunda     December 28, 2020     Vue.js Tutorial     No comments   

 Vue.js Installation

Compatibility Check

Before going to install and use Vue.js in your project, you should check the compatibility issues. Vue does not support IE8 and below versions of IE, because it uses ECMAScript 5 features not supported in IE8. It supports all the ECMAScript 5 compliant browsers.

How to install Vue.js?

There are several methods to use Vue.js. You can install it by going to its official site or can start using the Vue.js file from the CDN library also. Here, we are going to discuss some ways on how to install and use Vue.js in your project.

By using the <script> tag directly in HTML file

If you want to use the <script> tag of Vue.js directly in your HTML file then you have to download it from the official website.

  1. <html>  
  2.    <head>  
  3.       <script type = "text/javascript" src = "vue.min.js"></script>  
  4.    </head>  
  5.    <body></body>  
  6. </html>  

Let's go ahead to the official website of Vue.js https://vuejs.org/v2/guide/installation.html and download the vue.js according to your requirement. Here, you will get two versions of Vue.js to use- development version and production version.

The following image shows both versions:


The development version is best to use in your project because it is not minimized, and helps you with the warnings and debug mode during the development of the project. On the other hand, the production version is minimized, as shown in the above screenshot.

Vue.js recommends that you not use the minified version during development because it doesn't show the warnings for common mistakes during the development of the project.

By Using CDN

You can also use the Vue.js file from the CDN library in your application. Use this link https://unpkg.com/vue within <script> element in your application, and you will get the latest version of Vue.js.

Example 1:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>My first Vue app</title>  
  5.   <script src="https://unpkg.com/vue"></script>  
  6. </head>  
  7. <body>  
  8.   <div id="app">  
  9.     {{ message }}  
  10.   </div>  
  11.   <script>  
  12.     var app = new Vue({  
  13.       el: '#app',  
  14.       data: {  
  15.         message: 'Vue.js example with CDN'  
  16.       }  
  17.     })  
  18.   </script>  
  19. </body>  
  20. </html>  

Output:

Vue.js example with CDN 

You can also get Vue.js on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) and cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Example 2:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>My first Vue app</title>  
  5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6. </head>  
  7. <body>  
  8.   <div id="app">  
  9.     {{ message }}  
  10.   </div>  
  11.   <script>  
  12.     var app = new Vue({  
  13.       el: '#app',  
  14.       data: {  
  15.         message: 'Vue.js second example with CDN'  
  16.       }  
  17.     })  
  18.   </script>  
  19. </body>  
  20. </html>  

Output:

Vue.js second example with CDN 

By Using NPM

NPM is recommended to use if you want to make a large scale application with VueJS. Use the following command to install the Vue.js using the npm package. It comes with Browserify and Webpack, along with other necessary tools that make development easy.

  1. npm install vue   

Note: Don't use this method if you are not yet familiar with Node.js-based build tools.

By Using CLI Command Line

You can also install Vue.js by using CLI and get started with the server activation. Use the following command to install Vue.js using CLI:

  1. npm install --global vue-cli   


It will take a few minutes to install Vue.js cli. Once it is done, it will show the CLI version for Vue.js.

  1. + vue-cli@2.9.6  
  2. added 238 packages from 205 contributors in 346.282s   


  3. Create a project using Webpack

    Use the following command to create a project using Webpack. Here, we are going to create a project named "my_project".

    1. vue init webpack my_project   

    During this process, you will be asked to type Y/n. type Y and proceed further. It will automatically download the template and all dependencies.


After creating your project successfully, you will see a message like the following screenshot.


Start the project and Server

  • Now, the project is created. Go to the project directory by using the following command:
  1. cd my_project  
  • Use the following command to start the Server:
  1. npm run dev   

You can see that after running the npm run dev command, the Server is started. Now, open the compatible browser i.e., Google Chrome, and run the localhost http://localhost:8080/#/ to open your project.



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Vue.js Computed PropertiesVue.js Computed Properties In Vue.js, computed properties are used when we have to handle complex logic and operations. Computed properties are j… Read More
  • Vue.js TemplateVue.js TemplateIn the previous Vue.js Instance chapter, we have learned how to get an output in the form of text content on the screen. In this chapte… Read More
  • Vue.js InstanceVue.js InstanceTo start a Vue application, you have to create a new Vue instance by using the Vue function. Whenever we create a new Vue project, the … Read More
  • Vue.js ComponentVue.js ComponentVue.js components are one of Vue.js' most important features and used to create custom elements that can be reused in HTML. Compo… Read More
  • Vue.js Conditions & LoopsVue.js Conditions & LoopsConditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one … Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Spring boot app (error: method getFirst()) failed to run at local machine, but can run on server
    The Spring boot app can run on the online server. Now, we want to replicate the same app at the local machine but the Spring boot jar file f...
  • Log activity in a Laravel app with Spatie/Laravel-Activitylog
      Requirements This package needs PHP 8.1+ and Laravel 9.0 or higher. The latest version of this package needs PHP 8.2+ and Laravel 8 or hig...
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh
    I had follow these steps to install an configure firebase to my cordova project for cloud messaging. https://medium.com/@felipepucinelli/how...
  • Step-by-step guide to linking gnuplot to Octave within Virtual Studio Code (VSC)
    I am aware of a number of previous questions (here, here and here for example) pointing out to the need to modify a file named .octaverc. ...
  • Laravel auth login with phone or email
          <?php     Laravel auth login with phone or email     <? php     namespace App \ Http \ Controllers \ Auth ;         use ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Laravel Seeder Generator - 5/12/2025
  • Improve HTTP Error Testing with Laravel's requestException() Method - 5/12/2025
  • Track Metrics Effortlessly with Laravel's Context Increment and Decrement Methods - 5/4/2025
  • NativePHP Hit $100K — And We're Just Getting Started 🚀 - 5/8/2025
  • Name Queued Closures in Laravel 12.13 - 5/9/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda