基于 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 -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，效果图如下：右边为菜单栏，左边为主体局部

开源

目前凋谢的是前端代码 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 增删改查等。

表单对应不同的对象

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

业务数据操作

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