This is an error that occurred when using a simple mini app to read Vue.js on a CDN. I will keep it as a memorandum. Since it is a beginner, please point out any mistakes!
Uncaught ReferenceError: Vue is not defined When I wrote the following code to check the operation of vue.js, vue.js was not loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="vue.css">
<title>Document</title>
</head>
<body>
<div id="app">
<p>Current{{ number }}Clicked times</p>
<button>count up</button>
</div>
<script src="vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
//vue.js
new Vue({
el: '#app',
data: {
number: 0
}
})
<!-Solution-> The solution is simple. Just write the CDN for using Vue on the third line from the bottom above js is loaded. Put it inside the head tag or write it at the top of the body tag.
<!--Revised-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="vue.css">
<title>Document</title>
</head>
<body>
<div id="app">
<p>Current{{ number }}Clicked times</p>
<button>count up</button>
</div>
<script src="vue.js"></script>
</body>
</html>
I hope it helps the super beginners of Vue.js.