詳細步驟
下面的內(nèi)容適合新手，包含詳細步驟和注意事項。
1. 安裝 Nodejs 和 npm
訪問 Nodejs 官網(wǎng)下載并安裝 nodejs，選擇一個適合你的操作系統(tǒng)的安裝包，按照官方提示安裝即可。雖然不同的 nodejs 版本都可以運行喧喧，但可能需要額外的配置，建議你下載與喧喧開發(fā)者相同版本的 nodejs 版本。喧喧開發(fā)人員目前使用的 nodejs 環(huán)境版本是 8.11.3，可以在這個頁面 https://nodejs.org/zh-cn/download/releases/ 找到對應(yīng)版本的下載地址。
Windows 和 Mac 系統(tǒng)用戶可以直接下載非常方便的一鍵安裝包，安裝完成后打開命令行窗口（Mac 下為應(yīng)用 “終端”，Windows 下為程序 “命令提示符” 或 “PowerShell”）輸入如下命令查詢安裝后的版本號，如果輸出正確版本號說明安裝成功。
$ node -v
輸出：
v8.11.3
如果 nodejs 安裝成功，npm 也會一起安裝完成，輸入npm -v來檢查已安裝的 npm 版本。
$ npm -v
輸出：
5.6.0
2. 下載喧喧源碼
如果你的系統(tǒng)安裝有 git，只需要在命令行執(zhí)行如下命令來下載最新版的喧喧源碼：
$ git clone https://github.com/easysoft/xuanxuan.git
下載完成后就會在你的系統(tǒng)創(chuàng)建一個名稱為xuanxuan的目錄，該目錄內(nèi)就是喧喧最新的源碼，其中客戶端源碼在xxc目錄，以下所有操作都是在xxc目錄下進行。
$ cd xuanxuan/xxc
如果你還沒有安裝或使用過 git 也不用擔心，你仍然可以訪問 喧喧在 Github 上的頁面，直接點擊 “Download ZIP” 來下載源碼。下載完成后將 zip 文件解壓到xuanxuan目錄下即可。
3. 安裝項目依賴
從命令行進入下載好的喧喧源碼目錄（以下默認為xuanxuan/），執(zhí)行如下命令：
$ npm install
安裝失??？
此步驟通常需要幾分鐘，視網(wǎng)絡(luò)環(huán)境執(zhí)行的時間不定。如果你使用的是國內(nèi)網(wǎng)絡(luò)，可能導致某些依賴模塊安裝失敗。下面介紹使用國內(nèi) 淘寶 NPM 鏡像 來加速安裝過程，確保安裝成功。以下經(jīng)驗適合任何基于 nodejs 的項目。
將鏡像地址寫入~/.npmrc
在你的系統(tǒng)找到~/.npmrc文件，并用文本編輯器打開，寫入如下內(nèi)容到文件：
registry=https://registry.npm.taobao.org/ disturl=https://npm.taobao.org/dist
注意：.npmrc文件在系統(tǒng)的個人文件目錄下，在不同的操作系統(tǒng)上對應(yīng)的路徑不同，Windows 用戶通常次文件在C:/Users/UserName/.npmrc，Mac 用戶通常此文件在/Users/UserName/.npmrc。
寫好配置后可以使用npm info命令檢查下是否生效，以下為查看 ZUI 為例：
$ npm info zui
如果在命令行輸出信息的結(jié)尾找到 ZUI 的下載地址為registry.npm.taobao.com，說明配置生效了。
dist:{
shasum: '134f986bc53a62be2310a0438918b8a17b58c80c',
size: 9957159,
noattachment: false,
tarball: '**http://registry.npm.taobao.org/zui/download/zui-1.6.0.tgz**' },
publish_time: 1489730305654
}這樣再次執(zhí)行npm install命令就可以使用國內(nèi)的淘寶鏡像進行依賴模塊的安裝了。
安裝 Electron 失?。?/h4>設(shè)置 ELECTRON_MIRROR 環(huán)境變量
設(shè)置 Electron 環(huán)境變量，在 Mac 或 Linux 下執(zhí)行：
$ export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
Windows 用戶需要打開系統(tǒng)屬性面板來設(shè)置環(huán)境變量（變量名稱為ELECTRON_MIRROR，值為https://npm.taobao.org/mirrors/electron/）。
做了如上設(shè)置后，請重新執(zhí)行npm install。Windows 用戶注意，設(shè)置新的環(huán)境變量之后需要重新打開一個命令行窗口，所設(shè)置的環(huán)境變量才會生效。
單獨安裝 Electron
如果仍然遇到問題，你可以嘗試單獨先安裝 Electron，Mac 或 Linux 用戶執(zhí)行：
ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm install electron
Windows 用戶無法運行上面的命令，仍然
$ npm install cross-env -g
然后再執(zhí)行：
cross-env ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" npm install electron
這樣就可以強制從淘寶鏡像安裝 Electron。
其他資源
如果你還有其他問題，請參考如下內(nèi)容：
- npm taobao 鏡像官方網(wǎng)站；
- 加速electron在國內(nèi)的下載速度；
- 使用淘寶 NodeJS 鏡像加速 Electron Node-Sass 的安裝速度；
- 安裝node和npm并切換淘寶npm鏡像源。
4. 啟動開發(fā)服務(wù)器
如果你最后一次執(zhí)行npm install沒有出現(xiàn)任何錯誤，就可以啟動開發(fā)服務(wù)器了。
啟動 React 熱更新服務(wù)器
在命令行窗口執(zhí)行如下命令：
$ npm run hot-server
如果你在命令行窗口看到如下內(nèi)容，說明 React 熱更新服務(wù)器成功啟動：
熱更新服務(wù)器用于監(jiān)聽源碼文件更改，當你更改了源碼之后會立即重新編譯并通知界面組件進行刷新。這是一種所見即得的開發(fā)模式，也就是說你在源代碼中的更改會即時反饋到界面上來。
注意：只有 React 組件模塊會直接中界面上更新，如果是其他模塊雖然仍然會實時編譯，但并不會進行實時更換，此時你可以在界面上按頁面刷新快捷鍵（Windows 為F5，Mac 用戶為Command+R）來重新載入界面。
啟動客戶端
打開一個新的命令行窗口（不要關(guān)閉之前打開的正在運行的熱更新服務(wù)器命令行窗口）執(zhí)行：
$ npm run start-hot
如果你在命令行窗口看到如下內(nèi)容，說明客戶端啟動成功：
首次啟動時間過長
當首次執(zhí)行npm run start-hot時，Electron 會嘗試下載安裝REACT_DEVELOPER_TOOLS方便進行 React 開發(fā)調(diào)試，此時命令行會顯示Install electron development extensions...。正常情況下只需要幾分鐘，但在網(wǎng)絡(luò)不佳的話可能導致首次啟動時間過長。如果超過5分鐘主界面還沒啟動，可以嘗試禁用自動安裝 Electron 擴展，方法是使用npm run start-hot-fast代替npm run start-hot命令。
恭喜
通常情況下，如果以上步驟都成功，此時會在你的屏幕左側(cè)打開一個新的窗口：窗口上方是喧喧的界面，下方是 Chrome 的開發(fā)者工具。
更多建議：