安裝node.js

從 node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了。

安裝完成之後，打開命令行工具，輸入 node -v，如下圖，如果出現相應的版本號，則説明安裝成功。

安裝cnpm

在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等待，安裝完成如下圖。

如果輸入cnpm提示不是有效的命令，則cnpm 安裝失敗。

如果是Mac OS 系統，需要注意系統權限 最好在每一句命令前面加上 sudo。

 

安裝vue-cli腳手架構建工具

在命令行中運行命令 npm install -g vue-cli ，然後等待安裝完成。

通過以上三部，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。

 

找到一個項目目錄，在命令行中運行命令 vue init webpack project-name 。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中project-name是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中，如下圖。

解釋一下每個問題是什麼意思：

Project name :項目名稱

Project description 項目描述

Author 作者

Install vue-router?是否安裝vue路由組件，選擇是，因為此項目會用到

Use ESLint to lint your code ? 是否使用eslint來檢測代碼風格，否。

Setup unit tests with Karma+Mocha? 是否安裝測試，否。

Setup e2e tests with Nightwatch?單元測試？否。

 

 

可一路回車。

 

説一下Mac OS可能會遇到的權限問題 vue init webpack project-name

提示 沒有權限，無法訪問。

這時使用 sudo vue init webpack project-name 提示輸入密碼，完成後成功安裝。

 

安裝項目所需的依賴

要安裝依賴包，首先cd到項目文件夾（project-name文件夾），然後運行命令 cnpm install ，等待安裝。

 

安裝完成。

 

運行項目

在項目目錄中，運行命令 npm run dev ，會用熱加載的方式運行我們的應用，熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

這裏簡單介紹下 npm run dev 命令，其中的“run”對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

 

 

打開瀏覽器輸入http://localhost:8080即可看到

 

 

 

這是項目的初始化