Appearance
開(kāi)發(fā)者必看 ?
TIP
若您已經(jīng)安裝好系統(tǒng)，并準(zhǔn)備開(kāi)始二次開(kāi)發(fā)或體驗(yàn)CRUD、終端等對(duì)代碼會(huì)有變更的操作，我們建議您首先閱讀本文檔。 本文值得仔細(xì)研究理解，以免您缺乏基本概念或開(kāi)發(fā)使用的方式方法錯(cuò)誤。
開(kāi)發(fā)環(huán)境搭建 ?
- 在
本地PC上安裝好BuildAdmin系統(tǒng)，作為開(kāi)發(fā)環(huán)境，有疑問(wèn)請(qǐng)看完這三點(diǎn)常見(jiàn)問(wèn)題。 - 全程使用
php think run命令啟動(dòng)的服務(wù)來(lái)進(jìn)行開(kāi)發(fā)工作，不開(kāi)啟Nginx、Apache之類(lèi)的服務(wù)器軟件，可參考：啟動(dòng)安裝服務(wù)。 - 在安裝
BuildAdmin時(shí)您已經(jīng)填寫(xiě)了系統(tǒng)的數(shù)據(jù)庫(kù)資料，需要開(kāi)啟對(duì)應(yīng)的數(shù)據(jù)庫(kù)服務(wù)，數(shù)據(jù)庫(kù)資料被保存在config/database.php文件。 - 在
/web目錄內(nèi)，執(zhí)行npm run dev命令，在瀏覽器打開(kāi) http://localhost:1818/#/admin（服務(wù)端已配置localhost允許跨域，同時(shí)1818端口是Vite的開(kāi)發(fā)服務(wù)，具有熱更新能力）。 - 開(kāi)發(fā)時(shí)，建議開(kāi)啟
TP框架的調(diào)試模式并了解如何調(diào)試接口，參考：開(kāi)啟調(diào)試模式 和 調(diào)試接口。 - 我們還為您準(zhǔn)備了 代碼編輯器配置 和 系統(tǒng)運(yùn)行流程 文檔，也值得一看。
以上六步曲之后，您修改前端代碼，localhost:1818 的頁(yè)面會(huì)熱更新，方便您實(shí)時(shí)調(diào)試。并且 api 請(qǐng)求會(huì)有具體報(bào)錯(cuò)信息，CRUD代碼生成后，立馬就可以看到效果，代碼編輯器內(nèi)也很難看到紅線、黃線等。
WARNING
開(kāi)發(fā)環(huán)境執(zhí)行了兩個(gè)命令，站點(diǎn)端口是 1818，接口會(huì)響應(yīng)詳細(xì)報(bào)錯(cuò)消息，并與 Nginx、Apache 無(wú)關(guān)，提問(wèn)前請(qǐng)先判斷好自己的環(huán)境。
常見(jiàn)問(wèn)題 ?
1. 為什么開(kāi)發(fā)環(huán)境一定是使用 php think run 啟動(dòng)的服務(wù)，而不是 Nginx 或其他 ？ ?
該服務(wù)通過(guò)執(zhí)行一條命令啟動(dòng)，在執(zhí)行這條命令時(shí)，我們能夠讀取到當(dāng)前的 環(huán)境變量，以此來(lái)實(shí)現(xiàn) WEB終端 的命令執(zhí)行功能，這條命令啟動(dòng)了站點(diǎn)的 服務(wù)端(API服務(wù))。
2. web 目錄下執(zhí)行 npm run dev 的意義？ ?
vue 項(xiàng)目不同于傳統(tǒng) js、jQuery 項(xiàng)目，開(kāi)發(fā)者所有的改動(dòng)是需要 編譯 的（工程化）；而該命令啟動(dòng)了 Vite 的熱更新服務(wù)，熱更新服務(wù)可以實(shí)現(xiàn)：開(kāi)發(fā)環(huán)境下無(wú)需編譯快速查看修改效果，執(zhí)行該命令后打開(kāi)的 localhost:1818，就是具備熱更新、熱重載等功能的開(kāi)發(fā)專(zhuān)用站點(diǎn)。
3. 每次改動(dòng)都需要 重新發(fā)布 ？ ?
錯(cuò)誤。如以上的第 2 點(diǎn)所描述，只需要啟動(dòng)熱更新服務(wù)進(jìn)行開(kāi)發(fā)工作即可，只在開(kāi)發(fā)工作完成將要上線時(shí)，才進(jìn)行重新發(fā)布。
4. 什么是前端工程化？有什么作用？ ?
工程化含義
工程化是一種技術(shù)實(shí)踐、是一種開(kāi)發(fā)方法論；它通過(guò)工具欄整合、流程規(guī)范和自動(dòng)化等手段，提高開(kāi)發(fā)效率，同時(shí)解決質(zhì)量、協(xié)作相關(guān)的問(wèn)題，掌握工程化思維已成為現(xiàn)代前端開(kāi)發(fā)的核心競(jìng)爭(zhēng)力。
工程化作用與優(yōu)勢(shì)
一個(gè)基本的 ES6、7 編譯為 ES5，即可節(jié)約大量工作量；然后 sass、less、typescript、eslint、prettier 等無(wú)一不是非常優(yōu)秀的工具。
工程化主要實(shí)踐方式
| 名稱(chēng) | 案例 | 備注 |
|---|---|---|
| 模塊化 | ES Module 規(guī)范、CommonJS 規(guī)范、過(guò)時(shí)的 AMD 規(guī)范、... | 現(xiàn)代前端開(kāi)發(fā)基石 |
| 組件化 | - | - |
| 包管理器 | pnpm、yarn、npm... | - |
| 工具鏈 | eslint、prettier、less、sass、typescript... | - |
| 自動(dòng)化構(gòu)建 | vite、rollup、esbuild、webpack... | - |
| 腳手架 | vue-cli、vite、umijs... | - |
| 一體化框架 | nuxt、next... | - |
| 持續(xù)集成與部署（CI/CD） | - | - |
| 等等 | - | - |
PS：新的東西要成為主流，往往得優(yōu)于舊東西 10 倍以上，不然頭都學(xué)禿了，圖個(gè)啥呢？大家都不傻，1年經(jīng)驗(yàn)的你可以說(shuō)不了解，3年經(jīng)驗(yàn)?zāi)氵€不懂，那就是你的問(wèn)題了，如果你對(duì)學(xué)習(xí)工程化還有顧慮，BuildAdmin 演示站首頁(yè)的文案于君共勉：
人們正是受夠了茹毛飲血的野蠻生活，才鼓起勇氣從天上借來(lái)了驅(qū)散黑暗時(shí)代的火；
而當(dāng)人們終于學(xué)會(huì)靠自己的力量點(diǎn)燃柴垛，手握火種的祭祀便悄無(wú)聲息的退出歷史舞臺(tái)，這對(duì)手握火種的人并非是一種遺憾，如果他不主動(dòng)邁向新時(shí)代，他的族群終有一日會(huì)被黑暗吞沒(méi)。
BuildAdmin 依賴(lài)流行且穩(wěn)定的技術(shù)棧，帶你見(jiàn)未來(lái)！