基于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, 次要起因有三点：

控件十分丰盛，谷歌material design格调，基本上能满足大部分的场景。
脚手架很弱小，和SPA，PWA，Cordova，Electron，SSR等默认集成，不须要花精力搭建环境，一键运行调试打包。
非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