「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰—環境搭建 （一）
基于Vue和Quasar的前端SPA項目實戰之環境搭建（一）
背景
crudapi增删改查接口系統的背景Java API服務已經全部可用，需要一套背景管理UI，主要使用者為開發人員或者對計算機有一定了解的從業人員，通過UI配置中繼資料和處理業務資料，經過調研最終決定通過Vue實作SPA單頁面Web應用，打開浏覽器就可以很友善使用。
技術選型
Vue
目前主流的三大前端架構分别是Angular、React、
。其中Angular适合大型項目，React的JSX文法個人覺得不是很好。由于本項目不是很複雜，并且避免引入Typescript，精力放在通用的原生Javascript（避免盲目追求新技術，掌握原生Javascript才是王道，就像C++永遠不會過時一樣），是以最終選擇了Vue，并且采用原生js開發。
Quasar
選擇好Vue之後，還需要選擇一款UI庫，國内主流的有Element UI，iView，Ant Design等，國外比較流行的是
，官網的介紹如下：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.
經過對比，最終選擇了Quasar, 主要原因有三點：
- 控件非常豐富，谷歌material design風格，基本上能滿足大部分的場景。
- 腳手架很強大，和SPA，PWA， Cordova ， Electron ，SSR等預設內建，不需要花精力搭建環境，一鍵運作調試打包。
- 非KPI産物，文檔齊全，作者全職維護，目前為止， github 的Star數為17.8K
環境搭建
安裝nodejs
官網
https://nodejs.org下載下傳安裝即可，要求nodejs版本大于等于10，但是建議不要大于14，
經驗證版本12是可以的。
node -v
v12.16.1 安裝@quasar/cli
需要全局安裝腳手架，如果是直接下載下傳已經建立好的工程，可以不安裝，但是為了後續開發友善，建議安裝一下。
npm install -g @quasar/cli 建立項目
通過指令quasar create建立，名稱為crudapi-admin-web
quasar create crudapi-admin-web 參數選擇如下：
運作項目
cd crudapi-admin-web
npm install
quasar dev 可以在package.json裡面添加scripts腳本
"scripts": {
"dev": "quasar dev",
"build": "quasar build"
} 然後也可以通過指令npm run dev調試運作
npm run dev 效果
成功後，預設打開
http://localhost:8080，效果圖如下：左邊為菜單欄，右邊為主體部分
開源
目前開放的是前端代碼crudapi-admin-web，課程也全部免費，目标使用者主要針對前端開發者，當然任何對crudapi感興趣的朋友也歡迎一起交流學習。
代碼倉庫
github位址
https://github.com/crudapi/crudapi-admin-webgitee位址
https://gitee.com/crudapi/crudapi-admin-web由于網絡原因，github可能速度慢，改成通路gitee即可，代碼同步更新。
Git常用指令
設定使用者和郵箱
git config user.name "crudapi"
git config user.email "[email protected]" 建立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 小結
本文主要介紹了項目背景和技術選型，通過Quasar腳手架建立了項目工程，并且本地運作成功。接下來會根據實際功能詳細講解代碼的實作，并逐漸push代碼。不會一次性全部送出代碼，主要有兩方面考慮：
一、開發工作雖然完成了，但是代碼需要整理。
二、有一個循序漸進的學習過程。
附demo示範
crudapi背景管理頁面，架構采用Vue，控件庫為Quasar，形式為SPA單頁面應用。
主要知識點：Vue基本知識，自定義元件，axios網絡請求，Vuex狀态管理，Router路由，本地存儲LocalStorage、Session、Cookie，登入，本地調試，docker打包等。
主要功能：中繼資料管理，序列号管理，表關系設定，業務資料crud增删改查等。
表單對應不同的對象
表關系圖顯示不同對象之間的關系
業務資料操作
官網位址：
https://crudapi.cn測試位址：
https://demo.crudapi.cn/crudapi/login