前言

最近由於公司需要，需要寫一個相對來說比較大型的後臺管理系統。為了保證管理系統操作體驗較為舒適並且專案後期益於維護，最後決定基於VUE全家桶來開發一個高度元件化的單頁SPA應用。

技術選型

• vue：進行資料繫結以及開發元件

• vue-router： 處理頁面路由

• vuex： 處理各元件間的通訊

• vue-resource：處理HTTP請求

• element-ui：使用UI框架中部分UI元件進行快速開發

專案建立

首先我們需要保證自己電腦安裝有Node執行環境

開啟命令列工具，輸入下面指令進行全域性安裝vue-cli

npm i vue-cli -g --verbose
 

提示：NPM站點雖然說在國內沒有被牆，但是使用NPM安裝第三方依賴包的時候仍然速度慢的經常讓人抓狂，這裡我們可以通過使用淘寶映象來提高我們的下載速度，具體方法可以參考我以前寫的這篇文章：如何提高NPM拉取第三方依賴包的速度

vue-cli安裝完畢之後，輸入下面指令初始化我們的專案。例如我們需要在D盤WorkCode資料夾下建立一個名為scaffold的專案

 cd D:\workCode
 vue init webpack scaffold 

這時會需要我們填寫一些專案基礎資訊，在這裡我們可以不用管它，只要一路按Enter鍵就可以了。下面是我們建立好的專案檔案目錄

專案建立完成之後cd

cd D:\workCode\scaffold
npm i  --verbose

由於需要安裝的依賴比較多，所以安裝時間可以稍微有點長，耐心等待下就好。如果中途安裝失敗，報錯內容如下的話：

出現這中情況是或許因為檔案phantomjs-2.1.1-windows.zip過大，同時網路不是特別好的原因導致檔案下載失敗，其實解決辦法很簡單，就是複製下載路徑並且貼上到瀏覽器中，通過瀏覽器下載檔案，具體情況如下：

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1
 
.1/phantomjs-2.1.1-windows.zip//這裡的路徑就是檔案的下載路徑
Saving to C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip//下載好的檔案放到上面這個指定的目錄下面
Receiving...
  [----------------------------------------] 0%
Error making request.
Error: read ECONNRESET
    at exports._errnoException (util.js:1026:11)
    at TLSWrap.onread (net.js:569:26)

Please report this full log at https://github.com/Medium/phantomjs

檔案通過瀏覽器下載完畢並且放到指定資料夾之後再次執行npm i --verbose就可以完美解決問題了。

三方依賴晚裝完畢之後在命令列工具中執行下面指令啟動專案：

npm run dev

如果瀏覽器中開啟下面這種頁面時，就說明我們的第一步建立初始專案的任務就完成了。

檢視更多文章請點選進入我的個人部落格