2.1 安裝和引入

本節內容將講述如何在不使用項目構建工具的條件下，安裝和引入Vue及其特定的調試工具。

對于原有的項目來說，由于Vue是一個輕量級、漸進式的JavaScript框架，所以你可以不用考慮將原有的技術架構直接引入Vue.js進行開發。即使在Angular的項目中引入Vue.js也是可以的，不過基本沒有人會這么做，因為這會使得項目結構變得混亂和難以管理，并且完全沒有必要。這是一個極端的例子，不過在某些并不極端的場合下，得益于Vue.js的靈活性，我們完全可以直接引入Vue.js。

上面所說的“直接引入”是相對于項目構建工具引入而言的。如果要開發全新的Vue項目，筆者建議使用項目構建工具Vue CLI，它可以快速構建一個“開箱即用”的大型單頁應用，并提供了優秀的構建配置。之后，開發者只需要關注業務本身和核心代碼的編寫就可以了，之后會有專門的章節對其進行描述。

2.1.1 如何引入Vue.js

可以在官網下載Vue.js的開發版本和生產版本，如圖2.1所示，并通過<script>標簽引入，此時Vue會被注冊為全局變量。

當然也可以用NPM［Node Package Manager, Node包（依賴）管理工具］安裝。

NPM最初用于管理和分發Node.js的依賴，它自動化的機制使得層層嵌套的依賴管理變得十分簡單，因此后來被廣泛應用于前端依賴的管理中。你需要在Node的官網下載Node客戶端，同時，你會得到一個“附送的”NPM工具。

由于NPM的倉庫源布置在國外，資源傳輸速度較慢且可能受制，這里，筆者不建議直接使用NPM安裝其他依賴，而是使用淘寶鏡像源的cnpm。

（1）安裝cnpm：

     npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）之后，使用cnpm安裝Vue.js：

     cnpm install vue

（3）引入Vue模塊：

     import Vue from 'vue'

2.1.2 安裝Vue Devtools

在Vue學習和開發之前，筆者建議在你的瀏覽器（推薦使用Google Chrome）上先安裝Vue Devtools拓展程序。Vue Devtools提供了一個界面，可以幫助我們查看Vue組件和全局狀態管理器Vuex中記錄的數據。

有條件訪問國外受限網站的讀者，可以直接訪問Google Web Store，搜索vuejs-devtools進行安裝。

沒有條件的同學只好跟著筆者手動安裝了。

（1）下載Vue Devtools（不了解Git的同學可以查看附錄相關內容）。

     git clone https://github.com/vuejs/vue-devtools.git

（2）進入vue-devtools目錄下，安裝構建工具所需要的依賴。

     cnpm install

（3）構建工具，出現類似如圖2.2中的信息即表示構建成功。

     npm run build

（4）打開Chrome擴展程序，如圖2.3所示。

（5）在擴展程序界面中，開啟“開發者模式”（“開發者模式”為關閉狀態時，搜索欄下的按鈕將被隱藏），并點擊“加載已解壓的擴展程序”，選擇“shell/chome”文件夾進行安裝，如圖2.4所示。

（6）再次打開Vue項目時，我們就可以在Chrome調試工具中通過vue-devtools查看組件狀態了，如圖2.5所示。