windows平台web前端環境搭建

標籤：環境搭建   vue   pad   baidu   bst   業務   down   cmd   不能   

背景

  隨著不同終端(Pad、Mobile、PC)的興起，對開發人員的要求越來越高，純瀏覽器端的響應式已經不能滿足使用者體驗的高要求，我們往往需要針對不同的終端開發定製的版本。為了提升開發效率，前後端分離的需求越來越被重視，後端負責業務、資料介面，前端負責展現、互動邏輯，同一份資料介面，我們可以定製開發多個版本。

環境搭建

  nodejs安裝

    1、下載：https://nodejs.org/en/download/  （windows的安裝msi檔案在過程中會直接添加path的系統變數，變數值是你的安裝路徑。）

    2、安裝完成後使用cmd測試下是否安裝成功，方法：在cmd下輸入node -v。

    3、新版的Node已經整合npm，在安裝node時npm也一併安裝，驗證方法：npm -v。

  webpack安裝

    1、npm install webpack -g（-g 表示全域安裝）

    2、驗證方法：webpack -v

  sass安裝

    1、sass依賴於ruby環境，ruby：http://rubyinstaller.org/downloads

    2、在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變數。

    3、安裝完ruby之後，在開始菜單中，找到剛才我們安裝的ruby，開啟Start Command Prompt with Ruby。

    4、直接在命令列中輸入：gem install sass；更新已安裝的sass：gem update sass；驗證sass安裝：sass -v

  vue安裝

    1、vue-cli安裝命令：npm install -g vue-cli

  git安裝

    1、git：https://git-scm.com/downloads

  webstorm安裝

    1、軟體：http://www.jetbrains.com/webstorm/download/#section=windows-version

    2、配置sass編譯：開啟配置（Tools - File Watchers）就可以見到了，點擊“+”號就可以建立監聽配置了。在建立一個 sass、scss、less 檔案之後，webstorm 會智能的提示你建立一個 watcher 任務。

    3、配置webpack打包

參考連結

  1、sass：https://www.w3cplus.com/sassguide/install.html

  2、webpack：http://www.ferecord.com/webpack-summary.html

  3、前後端分離：http://frontenddev.org/link/full-stack-development-with-nodejs-1.html

  4、git：http://jingyan.baidu.com/article/020278117cbe921bcc9ce51c.html

windows平台web前端環境搭建