Installation of VueJs
There are many methods to install VueJS. Here we will discuss some methods to install VueJS.
1. Using CDN
2. Using VITE
3. Using CLI
4. Using NPM
NOTE: In CDN method you can use link for access vue functionalities and for rest of methods your system must have installed node and npm.
1. Using CDN
In CDN method you can access vue functionalities from a CDN via script tag. When using Vue from a CDN, there is no "build step" involved. And this method you can use for testing purpose.
here we give some CDN links who you can add in your project and use it
https://unpkg.com/vue@3.2.41/dist/vue.global.js
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js
Example 1
create index.html file and pastbelow code on it and run.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello World'
}
}
}).mount('#app')
</script>
</body>
</html>
Example 2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE CDN</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello World'
}
}
}).mount('#app')
</script>
</body>
</html>
