後端 Java 程序員眼中的 Vue——（一）創建及運行

現在 Vue 用的越來越多，工作上有時前後端都要搞，作爲後端程序員接手 Vue 該如何做呢，下面來記錄一下基礎的東西，並創建一個 Vue 項目

• 談 Vue 不能避開的 3 個東西

Node.js
npm
vue-cli

Node.js是運行前端 HTML 、CSS、JavaScript 的平臺
npm全稱 Node.js Package Manager,就是前端 Node.js 包管理工具
vue-cli快速搭建 Vue 項目的骨架、腳手架；
有了創建項目的 vue-cli，創建完項目就在 Node.js 運行，感覺就是後端創建一個 Java Web 項目然後放 Tomcat 上運行一樣，下面來看怎麼創建第一個項目。

1.搭建環境

由於Node.js包含npm的安裝選項,其實真正要安裝的只有兩個：Node.js 、vue-cli

• 安裝 Node.js
  https://nodejs.org/en/
  
  推薦安裝紅框中的LTS版本，意思是 Long Term Support ——長學期支持版本，而不是當前最新版本。
• 下載的安裝包是一個直接能在windows上雙擊運行.msi文件，然後一通下一步安裝即可，安裝步驟略。
  安裝完打開 cmd 命令行，輸入

node -v
npm -v

出現如圖版本號，代表 Node.js 安裝成功

2.安裝 vue-cli

-vue-cli是一個項目構建工具，它也是一個 npm 包，在前面安裝完 Node.js 後，需要先設置鏡像地址爲淘寶地址，這個操作類似 Maven 國外鏡像倉庫太慢，我們用阿里的鏡像地址代替一樣

npm config set registry https://registry.npm.taobao.org

再輸入

npm install -g @vue/cli

來安裝 vue-cli 腳手架，-g意思是全局應用的意思，這樣在隨便哪個目錄下都能能用此腳手架命令，安裝過程會稍等一會，結果如圖：

3.創建項目

找一個你想創建 Vue 項目的目錄，我這裏就直接在當前目錄下創建了。運行

vue create vuedemo

來創建一個叫 vuedemo 的 Vue 項目，一個 Vue 項目就創建完了，而且還是基於最新的 vue-cli3 來創建的，前面還有一個腳手架版本 vue-cli2，這個不細說，創建項目後如圖：

4.運行項目

創建完根據命令行中的提示。先打開 vue 項目目錄，

cd vuedemo

然後執行

npm run serve 

如圖：

至此一個 Vue 項目創建完成，圖上的報錯是因爲我把命令輸錯了；最後根據提示訪問http://localhost:8081/地址，出現如下頁面說明vue項目創建成功了！

5.備註

是不是很簡單，其實博主主要想讓大家瞭解大步驟其實並不多，但是小的細節還是比較多的，尤其是第3步運行vue create vuedemo的時候，下面我按順序來截圖並說明在vue create vuedemo時的詳細內容，請看一堆圖:

• 執行vue create vuedemo
  
  移動>選中Manaully Select Featrues 後按回車
  
• 選完回車
  
• 輸入n，代表否，回車
  
• 選擇package.json回車
  
• 是否保存爲將來的項目的前置設置,或叫前置模板，選否；然後等着，最後的時間比較長，耐心等待；然後就到了第 5 步，運行項目了：npm run serve了

7.結束

這樣一個 Vue 項目就創建完成了，你 get 到了嗎？有了項目，平時該怎麼開發，創建完項目的目錄都是幹什麼用的？下一篇 介紹安裝類似 後端eclipse 、IntelliJ IDEA工具的前端開發工具 WebStorm，還有會介紹目錄幹什麼的，敬請期待！