本篇文章適合，想要學習 vue，但對 vue 又沒有接觸過的同學閱讀，是非常基礎的內容。告訴大家使用 vue 時的安裝方式，及如何創建實例，展示內容。
一、安裝方式
vue 是一種前端框架，所以使用前我們必須安裝，有三種安裝方式分別為：
1.1、使用 script 標簽引入
在 vue 官方文檔，我們可以下載開發版本和生產版本兩個 js 文件，生產版本是經過壓縮，刪除注釋，警告等，比開發版本文件要小，下載之后直接通過 script 標簽引入，Vue 會被注冊為一個全局變量。
//使用
<script src="static/js/vue.js"></script>1.2、CDN
使用 cdn 方式引入 vue.js 文件，與上述 script 標簽引入是類似的，使用 cdn 引入需要注意引入文件的版本號，建議鏈接到一個明確的版本號和構建文件，避免新版本造成影響。
//使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>1.3、NPM
vue 構建大型應用項目時，推薦使用 npm 安裝，因為 npm 能很好的和 webpack 或 browserify 模塊打包器配合使用，同時 vue 也提供配套工具來開發單文件組件。
什么是腳手架？
vue 提供了一個官方的 cli，為單頁面應用(SPA)快速搭建繁雜的腳手架。它為現代前端工作流提供了開箱即用的構建設置。
使用 npm 安裝 vue 之前，需要先安裝 node.js 環境。
// 安裝語法 npm install vue1.4、Bower
# 最新穩定版本 $ bower install vue二、初始化
突然想起一個特別有意思的話，程序員遍地都是對象，唯獨我沒有對象。聽起來特別扎心的一句話，作為程序媛的妹子之前也有過這種苦惱，不過我還是要告訴你一句，緣分未到，靜待緣來！
vue實例化的時候，與我們面向對象的實例是一樣的，想看《面向對象》的，可自行翻看下。
創建一個 vue 實例，代碼如下：
var vm = new Vue({ el:'#app', data(){ //定義數據 } })
vm 是（ViewModel）的縮寫，表示 Vue 的實例。
實例化時，可傳入一個選項對象，選項對象中可以加入很多選項。
el 是用於掛載要管理的元素，el之外的元素不會被vue解析。
data 用於定義綁定到元素的數據。
三、第一個 vue 頁面
做一個簡單的 hello world 頁面，我們使用cdn方式引入vue。具體實例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data(){
return{
msg:'hello world'
}
}
})
</script>
</body>
</html>
打開網頁，正常運行，顯示 hello world。
3.1、如果我們繼續給div添加一個兄弟節點，繼續展示 msg 數據，如：
<div id="app">{{msg}}</div>
<div>{{msg}}</div>
運行結果如圖：
此時我們發現 {{msg}} 並沒有被解析，直接原樣輸出。是因為，el 掛載要管理的元素，而后邊的 div 沒有在管理元素內，所以直接輸出了，並沒有解析內容。
值得注意的是，開發時，需要解析的內容都要放到被掛載管理的元素內。