剛來公司實習發現公司的前端使用的是vue，之前根本就沒有聽說過。然後一上來就需要看程式碼，but but 就是沒有文件什麼的東西，

就需要自己去研讀，我就想去執行其中的前端和後端聯調起來方便理解，結果在配置和執行中出現了很多挫折，我就想寫一下方便

大家不去採坑，直接執行好

一、在IDEA中配置vue外掛

點選File-->Settings-->Plugins-->搜尋vue.js外掛進行安裝，下面的圖中我已經安裝好了。

二、搭建node.js環境

安裝node.js 可以去官網下載：安裝過程就很簡單，直接下一步就行

測試是否安裝成功：要使用管理員方式開啟命令列cmd

安裝完成之後，開啟命令列工具,輸入node -v如果出現版本號，則說明安裝成功，npm包管理器是整合在node中的，所以，直接

輸入npm -v 就會顯示npm版本資訊

好了，node環境已經安裝成功，由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，

所以還需要安裝npm的國內映象----cnpm

三、安裝cnpm（注意都是管理員方式執行）

在命令列中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然後等待安裝，安裝完成之後，我們就可以用cnpm代替npm來安裝

依賴包了。

四、安裝vue-cli腳手架構建工具（注意都是管理員方式執行）

在命令列中執行命令cnpm install -g vue-cli,然後等待安裝完成，通過以上三步，我們的環境和工具都準備好了，接下來就開始使用

vue-cli來構建專案

五、構建執行專案

1.我這裡是已經有專案了，需要在命名行中，cd 到專案目錄中去

然後需要輸入命令：vue init webpack frontend (這裡命令的意思是初始化一個專案，專案名稱是frontend，其中webpack是構建工具，

也就是整個專案時基於webpack的)

執行命令初始化的時候會讓使用者輸入幾個基本的選項，如專案名稱、描述、作者等資訊，可以直接回車預設就可以了。

六、安裝專案依賴資源

在專案的根目錄下面會有一個package.json的檔案

這裡列出了專案依賴資源需要安裝

首先需要cd到專案目錄中去，然後輸入cnpm install 等待安裝，安裝中會出現警告資訊，有的會出現棧溢位等錯誤，我就是在這裡遇到了，一般

第一次安裝沒事，如果安裝過的，可以解除安裝了在重新安裝

七、執行專案

執行命令npm run dev會用熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動重新整理，瀏覽器就能實時看到修改後的效果

我們也可以在IDEA中配置執行

點選edit configurations配置，新增一個npm

 然後就可以在IDEA中運行了。