在windows下搭建vueJS開發環境

轉自:https://www.cnblogs.com/RexSheng/p/6934413.htmlhtml

  1. nodejs官網http://nodejs.cn/下載安裝包,無特殊要求可本地傻瓜式安裝,這裏選擇2017-5-2發佈的 v6.10.3,也可選擇阿里雲鏡像https://npm.taobao.org/mirrors/node/,2019/3/23更新:建議選擇v10版本以上,官方最新Vue-Cli4將移除v9的支持
  2. cmd命令行:vue

    node -v //顯示node版本 v8.1.2node

    npm -v  //顯示npm包管理器版本 5.0.3webpack

  3. 因爲有些npm有些資源被屏蔽或者是國外資源的緣由,常常會致使用npm安裝依賴包的時候失敗,全部我還須要npm的國內鏡像---cnpm
  4. Cmd命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.orgweb

  5.  安裝vue-cli腳手架構建工具vue-cli

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

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

  7. 首先,咱們先選擇進入到e咱們的工做目錄爲 E:\我的\VueJS。此目錄需先建好,目前是空的,這個工做目錄之後會添加各個項目目錄。
  8. 在VueJs目錄下,運行命令vue init webpack firstVue。其中,webpack是構建工具、模塊打包器,也就是整個項目是基於webpack的。其中,firstVue是項目文件夾的名稱,這個文件夾會自動生成在vuejs這個工做目錄中。
  9. 安裝過程當中,須要咱們輸入項目名稱,描述,做者,版本(獨立版),使用ESLint規範等等,此時,咱們看到工做目錄下已經自動生成了目錄firstVue,以下圖。瀏覽器

  10.  主要用的包都在package.json中,IDE使用的是VSCode,以下圖架構

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

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

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

  14. 若是啓動過程當中出現端口衝突問題,只須要將config目錄下的index.js文件中dev端口由8080改成8088

相關文章
相關標籤/搜索