Vue環境及安裝腳手架（Vue入門篇）

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

輸入命令： node -v

由於npm是國外的，使用起來比較慢，我們這裡使用**的cnpm映象來安裝vue.

**的cnpm命令管理工具可以代替預設的npm管理工具。

輸入命令：npm install -g cnpm --registry=

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

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

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

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

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

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

開啟d盤查看一下，會發現多了乙個剛剛建立的資料夾

輸入命令：cd my-project-first

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

輸入命令：cnpm install

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

輸入命令：cnpm run dev

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

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

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

不要著急，我也遇到過這樣的情況，總結了乙個非常完美的解決方案。

解決方案：

1：在專案裡執行這樣的命令

npm i prettier@~1.12.0

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

npm run dev

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

Vue環境及安裝腳手架（Vue入門篇）

vue腳手架安裝

vue安裝腳手架

安裝vue腳手架

Vue環境及安裝腳手架（Vue入門篇）

vue腳手架安裝

vue安裝腳手架

安裝vue腳手架

相關推薦