1.首先開啟官方網站

網址：https://cn.vuejs.org/

2.下載一個開發版本

路徑：學習-教程-下載，然後點選開發版本

3.在D盤新建一個vue目錄，然後用webstorm開啟

4.在vue目錄下，新建一個Vue.js檔案，把剛下載的檔案內容複製到這裡

5.在Vue目錄下，新建index.html檔案

接下來第一次使用vue.js，用vue.js建立一個例項，然後編寫一段最簡單的程式碼。

6.開啟頁面

7.繼續編輯程式碼

開啟頁面

注意看vue的例項已經接管了<div id="root"></div>標籤的內容，或者說已經和標籤做了繫結，那麼在這個標籤上就可以使用vue例項裡面msg資料

看下頁面效果

附錄：

1.以前的寫法在js裡面，document.getElementById("root")獲取到root這個標籤，然後把它定義到一個變數裡面

var dom = document.getElementById("root")

dom.innerHTML = "hello world"

2.在沒有vue之前我們再寫源生或Jquery都是這麼寫的,手動處理dom

3.可是在vue裡面就不需要這麼寫，只需要在標籤裡面需要使用msg這樣一個數據下面建立了一個vue例項，定義好了msg資料，然vue的例項，通過el和上面的標籤做一個繫結，msg的內容就會自動顯示的div標籤裡面.