十分鐘上手-搭建vue開發環境（新手教程）

想寫一些關於vue的文章已經很久了，因為這個框架已經火了很久，在公司裡用的框架都比較老舊，但怎麼也得跟上前端發展變化的潮流，這不，開始使用vue開發專案了，一遍開發一邊踩坑中，今天要記錄的是五分鐘搭建vue開發環境，執行GitHub上的開源專案。步驟很簡單，只是在搭建環境的過程中會遇到各種各樣奇怪的報錯，十分讓人頭疼。

1：安裝node

端開發框架和環境都是需要 Node.js ，先安裝node.js開發環境，vue的執行是要依賴於node的npm的管理工具來實現，下載https://nodejs.org/en/，安裝完成之後，開啟cmd開始輸入命令。（我用的是win10系統，所以需要管理員許可權，右鍵點選以管理員身份執行cmd），不然會出現很多報錯。

2：檢視node的版本號

下載好node之後，以管理員身份開啟cmd管理工具，，輸入 node -v ，回車，檢視node版本號，出現版本號則說明安裝成功。

輸入命令： node -v

3：安裝淘寶npm映象

由於npm是國外的，使用起來比較慢，我們這裡使用淘寶的cnpm映象來安裝vue.
淘寶的cnpm命令管理工具可以代替預設的npm管理工具。

輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

4：安裝全域性vue-cli腳手架

淘寶映象安裝成功之後，我們就可以全域性vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在命令輸入vue，出來vue的資訊，及說明安裝成功；

輸入命令：cnpm install --global vue-cli

5：建一個新專案

搭建完手腳架之後，我們要開始建一個新專案，這個時候我建議，儘量不要裝在C盤，因為vue下載下來的檔案比較大，如果要改盤的話，直接輸入D：回車就可以直接改盤

輸入命令：vue init webpack my-project-first

回車，my-project-first是我自己的資料夾的名字，是基於webpack的專案，輸入之後就一直回車，直到出現是否要安裝vue-route，

這個我們在專案要用到，所以就輸入y 回車

6：注意

下面會出現是否需要js語法檢測，這個我們暫時用不到，就可以直接輸入no，後面的都可以直接輸入no，都是我們暫時用不到的

建立完成之後的提示：

開啟D盤檢視一下，會發現多了一個剛剛建立的資料夾

7：進入專案資料夾

資料夾已經下載好了，現在就可以進入資料夾，輸入： cd my-project-first 回車進入新建的專案。

輸入命令：cd my-project-first

8：在專案裡安裝依賴

因為各個模板之間都是相互依賴的，所以現在我們要安裝依賴，在專案裡輸入以下命令。

輸入命令：cnpm install

9：執行

一切環境依賴安裝準備就緒，我們來測試一下自己新建的vue專案的執行情況，輸入命令：cnpm run dev直接回車。會彈出一個瀏覽器訪問地址預設為localhost:8080。（我將地址修改為8081進行訪問）

輸入命令：cnpm run dev

10：在瀏覽器輸入localhost:8081

8080是預設的埠，要訪問的話，直接在瀏覽器輸入localhost:8080就可以開啟預設的模板了；（我的電腦上8080埠有需要，被另外一個專案佔用，故而使用8081的埠）

在瀏覽器輸入localhost:8081，顯示如下，到此為止，vue開發環境搭建完畢。

但是在最後一步的時候，有些人會遇到這樣的報錯：

不要著急，我也遇到過這樣的情況，總結了一個非常完美的解決方案。
解決方案：
1：在專案裡執行這樣的命令

npm i prettier@~1.12.0

:2：重新開啟執行即可成功：

npm run dev

最後如何修改預設的埠？

既然提到自己修改了預設的埠，那就說明一下。根目錄下有一個config資料夾，看名字就知道與配置有關，開啟config目錄下的index.js，這裡不僅可以改變埠，還可以根據需要改變其他配置資訊。

原文作者：祈澈姑娘
技術部落格：https://www.jianshu.com/u/05f416aefbe1

90後前端妹子，愛程式設計，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

關注「程式設計微刊」公眾號 ，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。公眾號回覆“1”，拉你程式序員技術討論群