Eclipse 使用 CodeMix 插件 開發 Vue.js


1、下載並安裝node.js

  官網地址: https://nodejs.org/en/ , 當前版本是 node-v8.11.4-x64.msi, 安裝過程直接默認選項即可。

       我下載的解壓版本

 

 

        解壓在E盤目錄如下:E:\vue

      

 

 

 

環境變量配置:路徑為剛才解壓的路徑

變量名:path

變量值:;E:\vue\node-v12.18.3-win-x86

    

 

 

 

  安裝完成后, 在CMD控制台輸入 node -v  和 npm -v ,如果都能顯示版本號,則是安裝成功

  1.1使用下面命令更改npm的源地址為淘寶源
    npm config set registry http://registry.npm.taobao.org/
  更改之后,查看是否正確的被更改
    npm config get registry

  1.3安裝vue-cli
  使用下面命令安裝vue-cli工具
    npm install -g @vue/cli
  安裝好之后,檢查vue-cli是否安裝成功
       vue --version

2、安裝eclipse codemix插件

  打開Eclipse, 選擇 Help -->Eclipse MarketPlace,輸入 vue 搜索codeminx插件, 點擊 install 進行安裝,如下圖, 安裝完成后,會提示重啟eclipse,點擊重啟即可。

  

 

  重啟eclipse后會進入到codeminx歡迎頁, 直接點擊 next, 到最后close就行

 

3、新建VueProject

  選擇 File -->New -->Other-->CodeMix-->VueProject,然后點擊next 輸入項目名, 最后點擊finish創建項目, 如下圖

  

  

4、在eclipse中的Vue項目中打開系統終端

  先打開項目根目錄的任何文件, 比如READFIRST.md 或 README.md, 然后默認使用快捷鍵 Ctrl + Alt + T 即可打開終端,如下圖, 終端目錄地址是項目根目錄。

  

  如果上述快捷鍵打不開, 則輸入 Ctrl + Shift + P 打開搜索框, 輸入 terminal關鍵字查找到 "Open Local Terminal on  Selection" 選項,按回車即可打開終端

  

 

5、測試終端命令

  在終端中輸入 npm -v  后回車,如果顯示版本信息則正常, 如果提示找不到命令, 則重新關閉eclipse並啟動即可,如下圖:

  

  

6、安裝npm依賴模塊

  在終端中輸入 npm install 后回車,安裝完成會生成 node_modules目錄,該目錄是npm加載的項目依賴模塊

7、運行Vue項目

  在終端中輸入 npm run dev 后回車,則運行Vue項目,之后會自動打開瀏覽器,顯示Vue歡迎頁面! 

 

   

 

  至此,codemix插件算是完成安裝並測試通過, 后續Vue開發, 靠大家自己摸索啦!


免責聲明!

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



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