1. 程式人生 > >在window下搭建Vue.Js開發環境(轉)

在window下搭建Vue.Js開發環境(轉)

圖片 需要 int alt first .html ron 接下來 post

  1. nodejs官網http://nodejs.cn/下載安裝包,無特殊要求可本地傻瓜式安裝,這裏選擇2017-5-2發布的 v6.10.3技術分享圖片
  2. cmd命令行:

    node -v //顯示node版本 v6.10.3

    npm -v //顯示npm包管理器版本 3.10.10技術分享圖片

  3. 由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的國內鏡像---cnpm技術分享圖片
  4. Cmd命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org技術分享圖片技術分享圖片

  5. 安裝vue-cli腳手架構建工具技術分享圖片

  6. 至此,我們需要的環境及工具已經準備好了。

    接下來,我們使用vue-cli來構建項目。

  7. 首先,我們先選擇進入到e我們的工作目錄為 E:\個人\VueJS。此目錄需先建好,目前是空的,這個工作目錄以後會添加各個項目目錄。技術分享圖片
  8. 在VueJs目錄下,運行命令vue init webpack firstVue。其中,webpack是構建工具、模塊打包器,也就是整個項目是基於webpack的。其中,firstVue是項目文件夾的名稱,這個文件夾會自動生成在vuejs這個工作目錄中。
  9. 技術分享圖片

    安裝過程中,需要我們輸入項目名稱,描述,作者,版本(獨立版),使用ESLint規範等等,此時,我們看到工作目錄下已經自動生成了目錄firstVue,如下圖。

  10. 技術分享圖片

  11. 主要用的包都在package.json中,如下圖

  12. 技術分享圖片

  13. cd到我們的項目文件夾firstVue中,運行命令cnpm install 安裝包,(註意:我們已經使用淘寶鏡像cnpm)

  14. 技術分享圖片

  15. 安裝完之後,我們發現項目文件夾下多了一個node_modules目錄,裏面就是項目依賴包資源

  16. 技術分享圖片

  17. 安裝完依賴包之後,就可以運行整個項目了。 運行項目在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

  18. 技術分享圖片

  19. 技術分享圖片

  20. 如果啟動過程中出現下方問題,只需要將config目錄下的index.js文件中dev端口由8080改為8088

  21. 技術分享圖片

  22. 技術分享圖片

轉自:https://www.cnblogs.com/RexSheng/articles/6934413.html

按照說明自己安裝的情況如下

技術分享圖片

在window下搭建Vue.Js開發環境(轉)