idea中啟動vue項目


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

想使用vue必須先安裝node.js : Node.js下載
在這里插入圖片描述
安裝直接全部點擊下一步最后完成安裝
安裝結束后打開cmd命令窗口
輸入以下命令驗證是否安裝成功,如出現版本號則安裝成功

node -v
npm -v
  • 1
  • 2

在這里插入圖片描述
安裝成功后,在cmd命令窗口使用如下命令安裝npm的國內鏡像cnmp

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

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

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

//安裝新版需先卸載舊版本
npm uninstall vue-cli -g
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

安裝完運行環境和構建工具后,就開始使用vue-cli來構建項目
使用cmd命令窗口cd到項目目錄下
在這里插入圖片描述
在項目目錄下使用如下命令初始化構建項目(初始化一個項目,項目名稱是 permission-ui,其中webpack是構建工具)

//舊版本
vue init webpack permission-ui
//新版本
vue create myvue
  • 1
  • 2
  • 3
  • 4

初始化時會讓用戶輸入幾個基本的選項,如項目名稱、描述、作者等信息,直接回車默認就可以了
在這里插入圖片描述
等待項目初始化完成
在這里插入圖片描述
項目初始化完成后,在項目目錄下使用如下命令安裝項目所需依賴

cnpm install
  • 1

在這里插入圖片描述
當項目依賴安裝完成后,就可以使用如下命令啟動項目,根據項目不同命令結尾不同,此項目為serve

npm run serve
  • 1

在這里插入圖片描述
啟動成功后,可用上圖的路徑訪問項目了
在這里插入圖片描述
使用idea啟動vue項目,在上面安裝好node.js環境並初始化完成和安裝好依賴的前提下,打開idea,然后在File–Settings–Plugins–Makerplace下找到vue.js插件,安裝並重啟idea
在這里插入圖片描述
重啟idea后,進行如下配置
在這里插入圖片描述
在這里插入圖片描述
在Sctipts中根據項目選中,此處選serve
在這里插入圖片描述
在下圖所示處找到安裝node.js的目錄並選擇node.exe
在這里插入圖片描述
配置完成后,ok並啟動項目
在這里插入圖片描述
啟動成功,可以通過圖中路徑訪問項目了
在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM