參考書籍《Vue.js快跑：構建觸手可及的高效能Web應用》第1章 Vue.js基礎--安裝和設定
阿新 • • 發佈：2021-06-17
安裝Vue不需要任何特殊的工具，使用下面的程式碼就可以實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", created() { //這段程式碼啟動時會執行 alert("與vueJs的美好邂逅") } }) </script> </body> </html>
注意：
- 首先有一個ID為app的div元素用於初始化Vue——因為多種原因，不能在body元素上進行初始化。
- 在頁面上引用CDN版本的Vue檔案。當然也可以下載到本地並引用。
- 建立一個Vue的例項，並將該例項的el屬性指向之前提到的div元素。
上述方式適合用於單頁面的引用，對於複雜專案希望使用類似webpack這樣的打包工具。
- 安裝nodeJs。
- 安裝webpack。
- 安裝vue-cli
- npm install --global vue-cli
- vue init webpack
npm run dev 啟動
訪問：http://localhost:8080
恭喜——你已經建立了你的第一個Vue工程！