使用IDEA工具配置和運行vue項目（詳細其中的坑）

剛來公司實習發現公司的前端使用的是vue，以前根本就沒有據說過。而後一上來就須要看代碼，but but 就是沒有文檔什麼的東西，

就須要本身去研讀，我就想去運行其中的前端和後端聯調起來方便理解，結果在配置和運行中出現了不少挫折，我就想寫一下方便

你們不去採坑，直接運行好

1、在IDEA中配置vue插件

點擊File-->Settings-->Plugins-->搜索vue.js插件進行安裝，下面的圖中我已經安裝好了。

2、搭建node.js環境

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

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

安裝完成以後，打開命令行工具,輸入node -v若是出現版本號，則說明安裝成功，npm包管理器是集成在node中的，因此，直接

輸入npm -v 就會顯示npm版本信息

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

因此還須要安裝npm的國內鏡像----cnpm

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

在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org而後等待安裝，安裝完成以後，咱們就能夠用cnpm代替npm來安裝

依賴包了。

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

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

vue-cli來構建項目

5、構建運行項目

1.我這裏是已經有項目了，須要在命名行中，cd 到項目目錄中去

而後須要輸入命令：vue init webpack frontend (這裏命令的意思是初始化一個項目，項目名稱是frontend，其中webpack是構建工具，

也就是整個項目時基於webpack的)

運行命令初始化的時候會讓用戶輸入幾個基本的選項，如項目名稱、描述、做者等信息，能夠直接回車默認就能夠了。

6、安裝項目依賴資源

在項目的根目錄下面會有一個package.json的文件

這裏列出了項目依賴資源須要安裝

首先須要cd到項目目錄中去，而後輸入cnpm install 等待安裝，安裝中會出現警告信息，有的會出現棧溢出等錯誤，我就是在這裏遇到了，通常

第一次安裝沒事，若是安裝過的，能夠卸載了在從新安裝

7、運行項目

運行命令npm run dev會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新，瀏覽器就能實時看到修改後的效果

咱們也能夠在IDEA中配置運行

 

點擊edit configurations配置，添加一個npm

 而後就能夠在IDEA中運行了。