基于Vue和Quasar的前端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, 主要缘由有三点：

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://www.javashuo.com/tag/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代码。不会一次性所有提交代码，主要有两方面考虑：
1、开发工做虽然完成了，可是代码须要整理。
2、有一个按部就班的学习过程。

附demo演示

crudapi后台管理页面，框架采用Vue，控件库为Quasar，形式为SPA单页面应用。
主要知识点：Vue基本知识，自定义组件，axios网络请求，Vuex状态管理，Router路由，本地存储LocalStorage、Session、Cookie，登陆，本地调试，docker打包等。
主要功能：元数据管理，序列号管理，表关系设置，业务数据crud增删改查等。

表单对应不一样的对象

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

业务数据操做

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