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


剛來公司實習發現公司的前端使用的是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中運行了。


免責聲明!

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



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