idea中啟動vue項目

原文鏈接:https://blog.csdn.net/qq_35551748/article/details/103733287

想使用vue必須先安裝node.js : Node.js下載

安裝直接全部點擊下一步最后完成安裝
安裝結束后打開cmd命令窗口
輸入以下命令驗證是否安裝成功,如出現版本號則安裝成功

node -v
npm -v

安裝成功后,在cmd命令窗口使用如下命令安裝npm的國內鏡像cnmp

npm install -g cnpm --registry=http://registry.npm.taobao.org

等待安裝結束即可,安裝完成之后,就可以用cnpm代替npm來安裝依賴包
cnmp安裝結束后,在cmd命令窗口使用如下命令安裝vue-cli構建工具

//老版本
cnpm install -g vue-cli
//新版本
npm install -g @vue/cli

//安裝新版需先卸載舊版本
npm uninstall vue-cli -g

安裝完運行環境和構建工具后,就開始使用vue-cli來構建項目
使用cmd命令窗口cd到項目目錄下

在項目目錄下使用如下命令初始化構建項目(初始化一個項目，項目名稱是 permission-ui，其中webpack是構建工具)

//舊版本
vue init webpack permission-ui
//新版本
vue create myvue

初始化時會讓用戶輸入幾個基本的選項，如項目名稱、描述、作者等信息，直接回車默認就可以了

等待項目初始化完成

項目初始化完成后,在項目目錄下使用如下命令安裝項目所需依賴

cnpm install

當項目依賴安裝完成后,就可以使用如下命令啟動項目,根據項目不同命令結尾不同,此項目為serve

npm run serve

啟動成功后,可用上圖的路徑訪問項目了

使用idea啟動vue項目,在上面安裝好node.js環境並初始化完成和安裝好依賴的前提下,打開idea,然后在File–Settings–Plugins–Makerplace下找到vue.js插件,安裝並重啟idea

重啟idea后,進行如下配置


在Sctipts中根據項目選中,此處選serve

在下圖所示處找到安裝node.js的目錄並選擇node.exe

配置完成后,ok並啟動項目

啟動成功,可以通過圖中路徑訪問項目了