【免費開源】基於Vue和Quasar的crudapi前端SPA項目實戰—環境搭建 （一）

背景介紹和環境搭建

背景

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, 主要緣由有三點：

1. 控件很是豐富，谷歌material design風格，基本上能知足大部分的場景。
2. 腳手架很強大，和SPA，PWA，Cordova]，Electron，SSR等默認集成，不須要花精力搭建環境，一鍵運行調試打包。
3. 非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代碼。不會一次性所有提交代碼，主要有兩方面考慮：
1、開發工做雖然完成了，可是代碼須要整理。
2、有一個按部就班的學習過程。

開源

目前開放的是前端代碼crudapi-admin-web，課程也所有免費，目標用戶主要針對前端開發者，固然任何感興趣的朋友也歡迎一塊兒交流學習。

代碼倉庫

github地址
https://github.com/crudapi/crudapi-admin-web

gitee地址
https://gitee.com/crudapi/crudapi-admin-web

因爲網絡緣由，github可能速度慢，改爲訪問gitee便可，代碼同步更新。