Vue.js 是一款非常流行的 JavaScript 框架,它的主要特點是組件化開發、數據驅動和聲明式渲染。為了搭建 Vue.js 應用程序,我們需要創建主入口文件 index.html 和主 JavaScript 文件 main.js。
index.html
-----------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的Vue應用程序</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js
-------
import Vue from 'vue'
new Vue({
el: '#app',
data: {},
methods: {},
computed: {},
components: {},
template: '<div>Hello World!</div>'
})
index.html 是我們應用程序的主 HTML 文件,它包括了必要的標簽和引用了 Vue.js 和 main.js 文件。需要注意的是,我們將 Vue.js 文件以 CDN 的形式引入,也可以通過 npm 安裝并本地引用。
main.js 是我們應用程序的主 JavaScript 文件,它主要負責構建 Vue 實例并將其掛載到頁面上。在這個文件中,我們通過 import 引入 Vue.js,并創建了一個新的 Vue 實例,將其掛載到 id 為 app 的 div 上,并提供了一些數據、方法、計算屬性、組件和模板。需要注意的是,從 Vue.js 3.x 版本開始,template 屬性被移除,推薦使用 render 函數代替。