「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)

简介: crudapi增删改查接口系统的后台Java API服务已经全部可用,需要一套后台管理UI,主要用户为开发人员或者对计算机有一定了解的工作人员,通过UI配置元数据和处理业务数据,经过调研最终决定通过Vue实现SPA单页面Web应用,打开浏览器就可以很方便使用。

「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)

基于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

经过对比,最终选择了Quasar, 主要原因有三点:

  1. 控件非常丰富,谷歌material design风格,基本上能满足大部分的场景。
  2. 脚手架很强大,和SPA,PWA,CordovaElectron,SSR等默认集成,不需要花精力搭建环境,一键运行调试打包。
  3. 非KPI产物,文档齐全,作者全职维护,目前为止,github的Star数为17.8K

github

环境搭建

安装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

参数选择如下:
创建Quasar

运行项目

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默认页面

开源

目前开放的是前端代码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-web
cd crudapi-admin-web
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:crudapi/crudapi-admin-web.git
git push -u origin master

推送已有仓库

cd existing_git_repo
git remote add origin git@github.com: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增删改查等。

table
表单对应不同的对象

table
表关系图显示不同对象之间的关系

customer
业务数据操作

官网地址:https://crudapi.cn
测试地址:https://demo.crudapi.cn/crudapi/login

目录
相关文章
|
9天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
5天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
1天前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
|
3天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
24 0
|
7天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
10天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
10天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
10天前
|
JSON JavaScript 前端开发
vue前端运行时出现RangeError: Maximum call stack size exceeded
vue前端运行时出现RangeError: Maximum call stack size exceeded
21 4
|
10天前
|
JavaScript 前端开发
vue前端展示【1】
vue前端展示【1】
12 1
|
10天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
29 0