【免費(fèi)開源】基于Vue和Quasar的crudapi前端SPA項(xiàng)目實(shí)戰(zhàn)—環(huán)境搭建 （一）
背景介紹和環(huán)境搭建
#
背景
crudapi增刪改查接口系統(tǒng)的后臺(tái)Java API服務(wù)已經(jīng)全部可用，需要一套后臺(tái)管理UI，主要用戶為開發(fā)人員或者對(duì)計(jì)算機(jī)有一定了解的工作人員，通過UI配置元數(shù)據(jù)和處理業(yè)務(wù)數(shù)據(jù)，經(jīng)過調(diào)研最終決定通過Vue實(shí)現(xiàn)SPA單頁面Web應(yīng)用，打開瀏覽器就可以很方便使用。
#
技術(shù)選型
#
Vue
目前主流的三大前端框架分別是Angular、React、Vue?
。其中Angular適合大型項(xiàng)目，React的JSX語法個(gè)人覺得不是很好。由于本項(xiàng)目不是很復(fù)雜，并且避免引入Typescript，精力放在通用的原生Javascript（避免盲目追求新技術(shù)，掌握原生Javascript才是王道，就像C++永遠(yuǎn)不會(huì)過時(shí)一樣），所以最終選擇了Vue，并且采用原生js開發(fā)。
#
Quasar
選擇好Vue之后，還需要選擇一款UI庫，國內(nèi)主流的有Element UI，iView，Ant Design等，國外比較流行的是Quasar?
，官網(wǎng)的介紹如下：One source code for all platforms simultaneously through Quasar CLI with all the latest and greatest best practices out of the box. Focus only on your app's features and forget about the boilerplate around it.?
經(jīng)過對(duì)比，最終選擇了Quasar, 主要原因有三點(diǎn)：
- 控件非常豐富，谷歌material design風(fēng)格，基本上能滿足大部分的場(chǎng)景。
- 腳手架很強(qiáng)大，和SPA，PWA，Cordova?
- (opens new window)
- ，Electron?
- (opens new window)
- ，SSR等默認(rèn)集成，不需要花精力搭建環(huán)境，一鍵運(yùn)行調(diào)試打包。
- 非KPI產(chǎn)物，文檔齊全，作者全職維護(hù)，目前為止，github?
- (opens new window)
- 的Star數(shù)為17.8K
#
環(huán)境搭建
#
安裝nodejs
官網(wǎng)https://nodejs.org?
下載安裝即可，要求nodejs版本大于等于10，但是建議不要大于14， 經(jīng)驗(yàn)證版本12是可以的。
node -v v12.16.1
#
安裝@quasar/cli
需要全局安裝腳手架，如果是直接下載已經(jīng)創(chuàng)建好的工程，可以不安裝，但是為了后續(xù)開發(fā)方便，建議安裝一下。
npm install -g @quasar/cli
#
創(chuàng)建項(xiàng)目
通過命令quasar create創(chuàng)建，名稱為crudapi-admin-web
quasar create crudapi-admin-web
參數(shù)選擇如下：?
#
運(yùn)行項(xiàng)目
cd crudapi-admin-web npm install quasar dev
可以在package.json里面添加scripts腳本
"scripts": {
"dev": "quasar dev",
"build": "quasar build"
}
然后也可以通過命令npm run dev調(diào)試運(yùn)行
npm run dev
#
效果
成功后，默認(rèn)打開http://localhost:8080，效果圖如下：左邊為菜單欄，右邊為主體部分
#
開源
目前開放的是前端代碼crudapi-admin-web，課程也全部免費(fèi)，目標(biāo)用戶主要針對(duì)前端開發(fā)者，當(dāng)然任何對(duì)crudapi感興趣的朋友也歡迎一起交流學(xué)習(xí)。
#
代碼倉庫
github地址
https://github.com/crudapi/crudapi-admin-web(opens new window)
gitee地址
https://gitee.com/crudapi/crudapi-admin-web(opens new window)
由于網(wǎng)絡(luò)原因，github可能速度慢，改成訪問gitee即可，代碼同步更新。
#
Git常用命令
#
設(shè)置用戶和郵箱
git config user.name "crudapi" git config user.email "[email protected]"
#
創(chuàng)建git倉庫
mkdir crudapi-admin-web cd crudapi-admin-web git init touch README.md git add README.md git commit -m "first commit" git remote add origin [email protected]:crudapi/crudapi-admin-web.git git push -u origin master
#
推送已有倉庫
cd existing_git_repo git remote add origin [email protected]:crudapi/crudapi-admin-web.git git push -u origin master
#
小結(jié)
本文主要介紹了項(xiàng)目背景和技術(shù)選型，通過Quasar腳手架創(chuàng)建了項(xiàng)目工程，并且本地運(yùn)行成功。接下來會(huì)根據(jù)實(shí)際功能詳細(xì)講解代碼的實(shí)現(xiàn)，并逐步push代碼。不會(huì)一次性全部提交代碼，主要有兩方面考慮： 一、開發(fā)工作雖然完成了，但是代碼需要整理。
二、有一個(gè)循序漸進(jìn)的學(xué)習(xí)過程。
#
附demo演示
crudapi后臺(tái)管理頁面，框架采用Vue，控件庫為Quasar，形式為SPA單頁面應(yīng)用。
主要知識(shí)點(diǎn)：Vue基本知識(shí)，自定義組件，axios網(wǎng)絡(luò)請(qǐng)求，Vuex狀態(tài)管理，Router路由，本地存儲(chǔ)LocalStorage、Session、Cookie，登錄，本地調(diào)試，docker打包等。
主要功能：元數(shù)據(jù)管理，序列號(hào)管理，表關(guān)系設(shè)置，業(yè)務(wù)數(shù)據(jù)crud增刪改查等。
?表單對(duì)應(yīng)不同的對(duì)象
?表關(guān)系圖顯示不同對(duì)象之間的關(guān)系
?業(yè)務(wù)數(shù)據(jù)操作
官網(wǎng)地址：https://crudapi.cn(opens new window)