環境搭建 · 龍嘯企業站系統搭建手冊

## 準備項目文件 1. 項目文件倉庫地址： + [ 后端項目倉庫地址：https://e.coding.net/longdada/web-home/home-admin.git](https://longdada.coding.net/public/web-home/home-admin/git/files) + [后端UI倉庫地址：https://e.coding.net/longdada/web-home/home-ui.git](https://longdada.coding.net/public/web-home/home-ui/git/files) 2. 安裝git for windows + 打開git for windows [官網 ](https://gitforwindows.org/) ![](https://img.kancloud.cn/8f/9d/8f9dddbb4e666f28d4c01b6a992209d2_1426x604.png) + 下載git for windows 客戶端 ![](https://img.kancloud.cn/8d/ea/8dea6df4dca358478e8547e904a01986_1645x591.png) + 下載后得到一個exe文件一路**默認選項**完成**安裝** ![](https://img.kancloud.cn/ba/2e/ba2e2549e8a85a0a20621f3b8cbbb763_132x195.png) 3. 執行克隆命令獲取項目文件 + 在存放**項目**的**目錄**位置右擊**空白位置**打開 `git base here` ![](https://img.kancloud.cn/6d/28/6d282c01a7ffa18d2588aebb466dcf12_279x367.png) + 打開后如下圖所示展示一個git for windows 的命令行界面 ![](https://img.kancloud.cn/a2/43/a243f4fbdf61ef5f20a279a8d7151873_595x377.png) + 執行 `git clone https://e.coding.net/longdada/web-home/home-admin.git` + 倉庫文件獲取成功如下圖所示： ![](https://img.kancloud.cn/aa/b6/aab65b044a572e6822ef26830bd3ce1f_559x146.png) + 執行 `git clone https://e.coding.net/longdada/web-home/home-ui.git` + 倉庫文件獲取成功如下圖所示： ![](https://img.kancloud.cn/80/a3/80a3663a89eea3a9e974e138198bd9b9_542x149.png) ## 安裝運行環境 1. 安裝phpstudy 運行環境 + 打開phpstudy[下載頁面](https://www.xp.cn/download.html) ![](https://img.kancloud.cn/3a/ab/3aab22d7476a34be18cc34fb894c0007_1430x687.png) + 點擊下載按鈕，下載phpstudy安裝包。獲取如下圖所示文件 ![](https://img.kancloud.cn/1b/e9/1be92a0fe4ea708d5bb1d48896e3a132_117x150.png) + 解壓安裝包 ![](https://img.kancloud.cn/75/2b/752b2b070ed3daa527c38924b6138cc3_684x105.png) + 設置好安裝目錄，一路默認安裝完成軟件安裝 5. 安裝composer （PHP依賴管理工具（或稱包管理器）） + 啟動安裝好的phpstudy ![](https://img.kancloud.cn/5c/78/5c781dc52d0a9093ca23e3a52df76552_798x626.png) + 點擊左側`軟件管理` --> `工具` ![](https://img.kancloud.cn/19/f3/19f3e6dc5a0dc2f5fcd4699d35a9d494_818x646.png) + 如**上圖所示**，點擊安裝按鈕完成安裝 + 右鍵點擊`我的電腦`-->`屬性`，打開屬性設置頁： ![](https://img.kancloud.cn/95/5f/955fdefc2eea67502e35fdfdcf7dde29_1127x627.png) + 點擊`高級系統設置`，打開系統屬性頁： ![](https://img.kancloud.cn/c6/c6/c6c60cb2e78620830e092258d11014bf_480x592.png) + 點擊環境變量，打開環境變量窗口： ![](https://img.kancloud.cn/89/0d/890d11488bd5a262a6eb369bb36cd1da_617x657.png) + 找到`系統變量`--->`path` 將剛剛composer安裝目錄設置到環境變量中方便全局調用： ![](https://img.kancloud.cn/62/24/62247adc75980ed6f718d5687d71ce9f_526x563.png) + 按住 win鍵+R鍵啟動運行命令窗口，如下圖所示： ![](https://img.kancloud.cn/e3/2e/e32e7ad45486e533111db394864d6038_403x228.png) + 在運行命令窗口輸入框輸入 `cmd` 并**回車** ![](https://img.kancloud.cn/75/89/75899253c32b2e4248633a0d3140313d_402x225.png) + 打開本機cmd命令行 ![](https://img.kancloud.cn/cc/70/cc707dc1d4a266a937d3c9afa50ec07a_979x508.png) + 輸入命令`composer -V` 顯示如下內容即為安裝成功 ![](https://img.kancloud.cn/7a/05/7a05fc957b94700017749aa35e909a30_437x55.png) + 如composer 響應速度較慢，可以使用命令`composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/`設置國內源，進行提速 ![](https://img.kancloud.cn/b4/7a/b47aa6ed17fd8dcbb68578b65800c887_841x51.png) > 如上圖所示，沒有報錯即為設置成功 6. 安裝node.js + 打開node js [下載頁](http://nodejs.cn/download/) ![](https://img.kancloud.cn/a2/96/a29660f8b7f6e1aa717101850656b5e4_1590x712.png) + 下載node.js安裝包完成后如下圖所示： ![](https://img.kancloud.cn/8d/d8/8dd88bc246bbcc5ec3ad52f82c3e9d58_110x139.png) + 雙擊上圖中的文件，一路默認進行安裝。 + 按住 win鍵+R鍵啟動運行命令窗口，如下圖所示： ![](https://img.kancloud.cn/e3/2e/e32e7ad45486e533111db394864d6038_403x228.png) + 在運行命令窗口輸入框輸入 `cmd` 并**回車** ![](https://img.kancloud.cn/75/89/75899253c32b2e4248633a0d3140313d_402x225.png) + 打開本機cmd命令行 ![](https://img.kancloud.cn/cc/70/cc707dc1d4a266a937d3c9afa50ec07a_979x508.png) + 分別運行`node -v`和`npm -v` ,如圖所示即為安裝成功： ![](https://img.kancloud.cn/4d/f2/4df27d3d4ce49af9119f3f3f8c591a8e_322x103.png) + 如npm 速度較慢，可以使用命令`npm config set registry https://registry.npm.taobao.org`設置國內源進行提速 ![](https://img.kancloud.cn/f8/04/f8044202dad5a29391a023985f13360a_673x59.png) > 如上圖所示，沒有報錯即為設置成功 7. 安裝 pnpm + 使用`npm install -g pnpm` 安裝。 + 使用`pnpm-v`檢車pnpm 是否安裝成功 ![](https://img.kancloud.cn/b9/02/b902164aa0e8685bc5486c102b5c54c5_279x51.png) > 至此項目運行環境搭建完畢。后端項目使用phpstudy運行，使用composer進行依賴管理，前端項目使用pnpm進行項目管理。