基于Vue和Quasar的前端SPA项目实战环境（一）背景crudapi的后台JavaAPI服务增删改查接口系统一应俱全，需要一套后台管理UI。主要用户是对计算机有一定了解的开发人员或工作人员。通过UI配置元数据和处理业务数据。经过研究，最终决定通过Vue实现SPA单页Web应用。打开浏览器即可轻松使用。技术选型Vue的三大主流前端框架分别是Angular、React和Vue。其中Angular适合大型项目，React的JSX语法不太好。由于这个项目不是很复杂，并且避免引入Typescript，专注于通用原生Javascript（避免盲目追求新技术，掌握原生Javascript才是王道，就像C++永远不会过时），所以最终选择了Vue,并使用原生js开发。Quasar选择了Vue之后，还需要选择一个UI库。国内主流的有ElementUI、iView、AntDesign等，国外比较流行的是Quasar。官网介绍如下：通过QuasarCLI同时为所有平台提供一个源代码，开箱即用所有最新最好的最佳实践。只关注您的应用程序的功能，而忘记它周围的样板。经过比较，我最终选择了Quasar。主要有3个原因：控件非常丰富，GoogleMaterialDesign风格，基本上可以满足大部分场景。脚手架非常强大，默认集成了SPA、PWA、Cordova、Electron、SSR等。无需花费精力搭建环境，一键运行、调试、打包。非KPI产品，文档齐全，作者专职维护。到目前为止，github上的star数为17.8K。搭建安装nodejs官网https://nodejs.org下载安装即可。nodejs版本要求大于等于10，但建议不要大于14，验证12版本即可。node-vv12.16.1@quasar/cli的安装需要全局安装脚手架。如果直接下载创建的项目，则不需要安装，但为了后续开发方便，建议安装。npminstall-g@quasar/cli通过命令quasarcreate创建项目，名称为crudapi-admin-webquasarcreatecrudapi-admin-web参数选择如下：运行项目cdcrudapi-admin-webnpminstallquasardev即可在package.jsonscripts中添加script"scripts":{"dev":"quasardev","build":"quasarbuild"}然后你也可以通过命令npmrundev调试运行。npmrundev效果成功后，默认打开http://localhost:8080，效果图如下：左边是菜单栏，右边是开源的主要部分。目前开源的是前端代码crudapi-admin-web，课程全部免费。目标用户主要为前端开发者。欢迎大家一起交流学习。代码仓库github地址https://github.com/crudapi/crudapi-admin-webgitee地址https://gitee.com/crudapi/crudapi-admin-web由于网络原因，github可能比较慢，改访问即可gitee，代码同步更新。常用Git命令设置用户和邮箱gitconfiguser.name"crudapi"gitconfiguser.email"admin@crudapi.cn"创建git仓库mkdircrudapi-admin-webcdcrudapi-admin-webgitinittouchREADME.mdgitaddREADME.mdgitcommit-m"firstcommit"gitremoteaddorigingit@github.com:crudapi/crudapi-admin-web.gitgitpush-uoriginmaster推送现有仓库cdexisting_git_repogitremoteaddorigingit@github.com:crudapi/crudapi-admin-web.gitgitpush-uoriginmaster总结本文主要介绍项目背景和技术选型。通过Quasar脚手架创建项目工程，本地运行成功。接下来会根据实际功能对代码的实现进行详细的讲解，代码会一步步推送。代码不会一下子全部提交。主要有两方面的考虑：1.开发工作虽然完成了，但是需要整理一下代码。其次，有一个循序渐进的学习过程。附上demo，演示crudapi后台管理页面。框架使用Vue，控件库为Quasar，表单为SPA单页应用。主要知识点：Vue基础知识、自定义组件、axios网络请求、Vuex状态管理、Router路由、本地存储LocalStorage、Session、Cookie、登录、本地调试、docker打包等主要功能：元数据管理、序列号管理、表关系设置、业务数据的CRUD增删改查等表单对应不同的对象表关系图展示了不同对象之间的关系业务数据操作官网地址：https://crudapi.cn测试地址：https://demo.crudapi.cn/crudapi/login
