1、下載與安裝Vue.js
Vue.js的官網： https://cn.vuejs.org/
如果在項目中使用Vue.js框架，有兩種方式：一是在頁面中使用Script的方式直接引入，可以在官網下載Vue.js的源碼，也可以使用CDN的方式引入；二是使用NPM的方式構建Vue項目，或者是使用Vue-cli腳手架創建項目。
本節我們先通過Script標簽在網頁引入Vue.js的方式來學習Vue實例，因為這種方法上手簡單，適合初學者學習Vue的基礎語法入門。在后面的教程中，會單獨介紹使用NPM和Vue-cli的方式搭建Vue項目。
本地引入
我們可以訪問Vue.js的官網下載，地址：https://vuejs.org/js/vue.min.js
也可以通過訪問GitHub下載，地址：https://github.com/vuejs/vue
在HTML頁面中使用script標簽引入：
<script src="js/vue.js"></script>
使用CDN引入
國內常用的CDN公共庫有：
騰訊網靜態資源公共庫： https://libs.qq.com/
字節跳動靜態資源公共庫： http://cdn.bytedance.com/
BootCDN服務： https://www.bootcdn.cn/
又拍雲JS庫CDN服務： https://upcdn.b0.upaiyun.com/
我們以BootCDN為例，打開BootCDN網站，搜索Vue：
在搜索結果列表中選擇Vue，進入Vue的CDN庫列表，選擇對應的版本，點擊復制鏈接，或者是復制 <script> 標簽，將Vue庫引入到網頁中：
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.common.js"></script>
2、創建第一個Vue實例
聲明式渲染
Vue.js的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進DOM中。
HTML代碼：
<div id="app">
{{ message }}
</div>
JS代碼：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
完整示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue實例</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="js/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
輸出結果：
Hello Vue
通過上面的代碼，我們已經成功的創建了第一個Vue應用。上面代碼中JS的數據和DOM已經建立了關聯，所有的東西都是響應式的。怎么確認數據是響應式的呢？我們可以打開瀏覽器，按F12進入開發者控制台（Console），修改 app.message 的值，可以看到頁面中的數據也做了響應的更新，效果如下圖：
每個Vue應用都是通過用 Vue() 函數創建一個新的Vue實例開始的：
var vm = new Vue({
// 選項
})
雖然沒有完全遵循MVVM模型，但是Vue的設計也受到了它的啟發，因此在文檔中經常會使用 vm （ViewModel的縮寫）這個變量名表示Vue實例。