本文主要介紹了項目背景和技術選型，通過Quasar腳手架建立了項目工程，并且本地運作成功。
背景介紹和環境搭建
背景
crudapi增删改查接口系統的背景Java API服務已經全部可用，需要一套背景管理UI，主要使用者為開發人員或者對計算機有一定了解的從業人員，通過UI配置中繼資料和處理業務資料，經過調研最終決定通過Vue實作SPA單頁面Web應用，打開浏覽器就可以很友善使用。
技術選型
Vue
目前主流的三大前端架構分别是Angular、React、Vue。其中Angular适合大型項目，React的JSX文法個人覺得不是很好。由于本項目不是很複雜，并且避免引入Typescript，精力放在通用的原生Javascript（避免盲目追求新技術，掌握原生Javascript才是王道，就像C++永遠不會過時一樣），是以最終選擇了Vue，并且采用原生js開發。
Quasar
選擇好Vue之後，還需要選擇一款UI庫，國内主流的有Element UI，iView，Ant Design等，國外比較流行的是Quasar，官網的介紹如下：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
官網下載下傳安裝即可，要求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，效果圖如下：左邊為菜單欄，右邊為主體部分
小結
本文主要介紹了項目背景和技術選型，通過Quasar腳手架建立了項目工程，并且本地運作成功。接下來會根據實際功能詳細講解代碼的實作，包容如下内容：Vue基本知識，自定義元件，axios網絡請求，Vuex狀态管理，Router路由，本地存儲LocalStorage、Session、Cookie，登入，本地調試，docker打包等，并逐漸push代碼。不會一次性全部送出代碼，主要有兩方面考慮：
一、開發工作雖然完成了，但是代碼需要整理。
二、有一個循序漸進的學習過程。
開源
目前開放的是前端代碼crudapi-admin-web，課程也全部免費，目标使用者主要針對前端開發者，當然任何感興趣的朋友也歡迎一起交流學習。
代碼倉庫
github位址
https://github.com/crudapi/crudapi-admin-web
gitee位址
https://gitee.com/crudapi/crudapi-admin-web
由于網絡原因，github可能速度慢，改成通路gitee即可，代碼同步更新。