前端環境配置與搭建

1、工具下載安裝

 

1.編輯器WebStorm

 

2.Git(分佈式的代碼管理工具)

 

3.Photoshop

 

4.Nodejs

 

連接:https://nodejs.org/

 

2、 環境配置

 

 

1.安裝git 與 webStorm

 

 

2.配置git：

 

 

設置Git的user name和email：

 

 

打開git.exe，輸入命令：

 

$ git config --global user.name "name"

 

$ git config --global user.email "xxxx@vchangyi.com"

 

生成SSH密鑰過程：

 

 

查看是否已經有了ssh密鑰：cd ~/.ssh

 

若是沒有密鑰則不會有此文件夾，有則備份刪除

 

生成密鑰：

 

$ ssh-keygen -t rsa -C "xxxx@vchangyi.com"

 

按3個回車，密碼爲空。

 

Your identification has been saved in /home/tekkub/.ssh/id_rsa.

Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.

The key fingerprint is:

………………

 

最後獲得了兩個文件：id_rsa和id_rsa.pub

 

添加密鑰到ssh：

 

登錄gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件，複製出裏面的內容，添加到 key 內，此時 Title 會自動填上你的郵箱，沒有的話手動填寫, ADD KEY

 

3.webStorm 鏈接git

 

 

打開webStorm: File -> Setting -> Version Control ->Ｇit : D:\Git\bin\git.exe

 

4.拉取代碼到本地

 

 

建立一個存放項目的文件夾，在該文件夾下，單擊右鍵，選擇git bash,打開git命令框，編寫命令：git clone git@gitlab.vchangyi.com:xx/xx.git（能夠在gitlab項目中找到存放地址，gitlab地址：http://gitlab.vchangyi.com ），按回車，就能夠從gitlab上clone代碼到本地文件夾

 

5.手動安裝nodejs，若是是pc端安裝的話，nodejs版本不能太低。

 

ps：親自踩過的坑，因爲咱們手機端的項目是比較早的了，因此若是跑手機端的話，nodjs不可安裝最新版，安裝最新版的話npm安裝項目依賴會有問題，手機端gulp沒法啓動，因此建議安裝nodejs V6。

 

6.測試node是否安裝成功

 

 

在git 命令窗或者node 命令窗中輸入命令 ： node -v

 

7.同理，測試npm是否安裝成功 npm -v

 

 

8.安裝gulp

 

 

在項目下打開git 命令窗，從淘寶源上自行安裝，這個時間須要等待和耐心，也會有網絡緣由致使安裝失敗，若是安裝失敗能夠多來幾回，直到成功爲止。

 

若是是移動端： npm install -g gulp --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

 

若是是pc端：npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads

 

npm 安裝時候 持久使用淘寶源 設置:

 

npm config set registry https://registry.npm.taobao.org

 

// 配置後可經過下面方式來驗證是否成功

npm config get registry

// 或

npm info express

 

9.移動端啓動gulp

 

 

打開webStorm,點擊底部的 Terminal 打開輸入窗，輸入命令 ： gulp serve

ps：若是手機端gulp沒法啓動，請檢查nodejs版本，參考本wiki的第五條nodejs的安裝。

同理，pc端啓動:npm run serve