今天我们就教大家开发一款企业级的「健康管理项目」,它的主要功能有:
老人/子女预定护工。
用户关联家属。
用户查看科普文章。
用户收到护工是否接受服务的通知功能。
医生发布文章。
护工发布服务。
护工查看服务。
护工收到用户的服务通知。
技术选型
「客户端」选择的是 vue-cli3。它的理念是让开发者能够快速地进行应用开发,简单说就是能不配置的就不配置,快速进行业务开发才是正经事。vue-cli3 也支持直接将一个 vue 文件跑起来,快速原型开发或验证某些想法时,是一个挺不错的选择。
「服务端」选择的是 Egg.js。Egg.js 为开发企业级应用而生,通过框架聚合其他插件,并根据自己的业务场景定制配置,可以使开发成本就变得很低。
「管理端」选择的是 iView admin,它是基于 Vue.js ,搭配 iView UI 组件库形成的一套后台集成解决方案,有轻量、功能强大、免费、兼容性好、帮助详细、使用的人多生态好等优点。
小结:通过 vue-cli3 脚手架快速搭建前端基本框架,通过 Egg.js 快速构建后端基本框架,封装 axios ,前端向后端发起请求,进行数据交互。
开发流程
因为 vue-cli 是基于 npm 的,所以我们应该先安装 node 环境,大家在本地安装时,可以通过 node 官网 下载系统对应的 node 安装程序。
注意: NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候,也安装好了 NPM。由于实验楼的环境下已经安装好了 Node.js,大家可以直接使用,所以本课程中不再讲解 Node 安装步骤。
学员在本地安装 node 版本时,注意下载版本的,Vue cli 要求 Node.js 版本 8 或更高版本。
如果 npm 安装时失败或者时间过长,可以先输入如下命令:
unset npm_config_registry npm config set registry="https://registry.npm.taobao.org"下面使用 npm 包管理工具全局安装 vue-cli 。
输入以下命令即按照最新的 vue-cli 脚手架版本。(网速等原因会影响下载速度)
npm install -g @vue/cli更多关于 Vue.js 基础知识的讲解,在本文中不做太多的讲解。
大家可参考实验楼 Vue.js 基础入门课程 学习。
接下来我们进行 vue-cli3 项目的搭建。
比如我们现在要建立 i护理 项目的客户端,在命令行中输入:
vue create inurse-client我们一般不选择默认,而选择**手动选择功能**,也就是选择 Manually select features。
接下来我们进行一些简单的配置选择:
Choose Vue version :选择 Vue 版本
Babel :js 转换器。
Router :路由。
Vuex :全局状态管理器。
CSS :预选择器。
Linter/Formatter :代码格式化。
回车之后我们选择 2.x
完成一系列的配置后,然后点击 web 服务:
启动之后就可以在浏览器看见出现如下效果:
这样,我们的脚手架就成功搭建起来了。以上内容来自实验楼课程 ——《Vue.js 和 Egg.js 开发企业级健康管理项目》:课程地址:https://www.lanqiao.cn/courses/2741篇幅有限,如果对这个项目感兴趣,欢迎来实验楼边敲代码边学习~课程完整内容:???????????? 点击阅读原文,了解课程更多信息~