基于 Vue 和 Quasar 的前端 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

官网https://nodejs.org下载安装即可，要求 nodejs 版本大于等于 10，但是建议不要大于 14，经验证版本 12 是可以的。

node -vv12.16.1

安装 @quasar/cli

需要全局安装脚手架，如果是直接下载已经创建好的工程，可以不安装，但是为了后续开发方便，建议安装一下。

npm install -g @quasar/cli

创建项目

通过命令 quasar create 创建，名称为 crudapi-admin-web

quasar create crudapi-admin-web

参数选择如下：

运行项目

cd crudapi-admin-webnpm installquasar 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-web

gitee 地址

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

由于网络原因，github 可能速度慢，改成访问 gitee 即可，代码同步更新。

Git 常用命令

设置用户和邮箱

git config user.name "crudapi"git config user.email "admin@crudapi.cn"

创建 git 仓库

mkdir crudapi-admin-webcd crudapi-admin-webgit inittouch README.mdgit add README.mdgit commit -m "first commit"git remote add origin git@github.com:crudapi/crudapi-admin-web.gitgit push -u origin master

推送已有仓库

cd existing_git_repogit remote add origin git@github.com:crudapi/crudapi-admin-web.gitgit 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