1. 對 Vue 的理解
Vue.js 是一個以數據驅動和組件化的思想構建的 JavaScript MVVM 庫，下載 Vue.js 後可以直接在html裏引用，Vue 本身並不依賴 Node 運行。
比如如下的代碼就可以直接在瀏覽器中查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
但是隨着業務開發過程中所需的庫或框架越來越多，在頁面中直接引用會對庫的管理和版本控制等造成極大的不便。所以一般會藉助 NodeJS中的 npm 工具來管理依賴包。
包括後面再使用 vue-cli 腳手架搭建項目的時候需要NodeJS，目前使用NodeJS最多的場景基本上都是作爲前端工程化構建工具。
2. 開發環境搭建
2.1 安裝 Node.js
首先需要安裝 Node.js（Javascript運行環境），因爲 Vue 依賴於 NodeJS 的 npm 的工具來管理依賴包。npm 是隨同 NodeJS 一起安裝的包管理工具， 可以理解爲 JAVA 中的 Maven。
安裝成功後，可以通過命令檢測安裝的版本信息。
node -v //監測 Node 的版本
npm -v //檢測 npm 的版本
2.2 安裝淘寶鏡像
npm 包管理工具在下載外部依賴包時候速度太慢，一般通過淘寶鏡像來下載，後續可以用 cnpm 命令管理工具代替默認的 npm 管理工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.3 安裝 Vue 的腳手架工具 Vue-cli
cnpm install --global vue-cli
vue-cli本身也是依賴包，用於自動生成vue項目模板。安裝成功後可以通過命令 "vue" 來查看腳手架相關信息。
3. 創建項目
腳手架安裝成功後就可以通過它來創建一個新的項目了。
3.1 創建項目，下載依賴
在項目存儲目錄中，按住 shift + 右鍵，然後選擇在此處打開命令窗口，輸入以下命令。（project-name是項目名稱）
vue init webpack project-name
3.2 安裝依賴
創建成功後，目錄中會有一個"project-name"文件夾，因爲各個模板之間都是相互依賴的，所以需要安裝依賴。在 "project-name" 文件夾中，按住 shift + 右鍵，然後選擇在此處打開命令窗口，輸入以下命令。
cnpm install
3.3 啓動項目
在 "project-name" 文件夾中，按住 shift + 右鍵，然後選擇在此處打開命令窗口，輸入以下命令就可以啓動項目了。在然後在瀏覽器訪問 "localhost:8080"。
cnpm run dev
4. npm 常用命令
新增依賴外部包 npm install <package-name> //局部安裝，包文件下載到 node_modules 目錄中（默認會安裝最新的版本） npm install -g <package-name> //全局安裝（默認會安裝最新的版本） npm install <package-name>@X.Y.Z //安裝特定版本（X.Y.Z爲包的版本號） 查看已安裝的依賴外部包 npm list <package-name> //當前目錄 npm list <package-name> -g //全局 更新依賴外部包 npm update <package-name> npm update <package-name> -g 卸載依賴外部包 npm unistall <package-name> //當前目錄 npm unistall -g <package-name> //全局