资讯专栏INFORMATION COLUMN

Vue.js + LeanCloud(node.js)前后端分离开发样板

wudengzan / 2185人阅读

摘要:最新的云引擎都升级到,很多都有变化,之前的全栈项目却是没人维护了。最近学习感觉真的好用,所以配合最新的云引擎写一个,作为以后快速开发的模板工具。前后端完全分离,服务端设置了跨域,前端项目提出去也是的。

如果对您有帮助的话,欢迎 star~ 我的github 地址

另外现在用命令行部署 leancloud 有点问题,async/await 会报错,但是使用 git 部署不会,所以还是使用lean deploy -g 进行部署吧~

LeanCloud 作为国内领先的 Baas 云服务提供者,简化了很多相对复杂的操作,使得前端工程师 hold 住一个完整项目变得简单。

通过 LeanEngine 云引擎部署前后端代码,配合高效的数据存储完全解放了生产力,尤其是2015年 LeanCloud 推出的 LeanEngine-Full-Stack 解决方案,它整合了当前 Web 技术的通用方案,并与 LeanEngine 紧密结合,将基础架构、自动化构建、国际化方案等底层技术解决方案组织成一个整体。用户可以通过最简单的方式,直接开始业务开发,不必再纠结那些底层的技术选型了。

但是,这个项目已经好久没有更新过了。。。最新的 LeanEngine 云引擎都升级到3.0,很多 api 都有变化,之前的全栈项目却是没人维护了。

最近学习 Vue.js 感觉真的好用,所以配合最新的云引擎写一个 boilerplate,作为以后快速开发的模板工具。

主要技术栈

语言方面,整套方案使用 ES6标准的 JavaScript 代码进行开发。

Server 端运行环境基于 LeanEngine Node.js 环境,依赖安装通过 npm,服务框架主要基于 Express 4.x。

前端取了个巧,直接使用了尤雨溪大大的 Vue-cli 生成。

前后端完全分离,服务端设置了跨域,前端项目提出去也是 OK 的。

.
├── public          // LeanEngine Web 前端发布目录,HTMLCSSJavaScript 构建后将放置于此
├── server-modules  // 服务器端代码模块目录
│    ├── app            // LeanEngine 服务端代码主入口
│    ├── api-router     // API 接口路由配置
│    ├── tool           // 工具方法
│    └── hello          // 示例代码
├── fe                       // Web 前端项目目录
│    ├── build          // 前端开发环境
│    ├── config         // 配置文件
│    └── src            // 源码目录
└── server       // LeanEngine 的环境配置
使用方式

如果没有使用过,并不了解 LeanCloud 或 LeanEngine,先到官网中了解。

首先确认本机已经安装 Node.js 运行环境和 LeanCloud 命令行工具,之后按照以下方式开始您的开发:

git clone 本项目后

在该项目根目录执行

$ npm install  // 安装服务端环境依赖

fe 目录中执行

$ npm install  // 安装前端环境依赖

调试

根目录执行

$ lean up

运行服务器端环境,通过 http://localhost:3000/ 可以测试

fe 目录中执行

$  npm run dev

运行 web 前端环境,通过 http://localhost:8080 可以调试

npm run build // 前端资源压缩并发布到根目录 public文件夹中

开发时需要同时运行这两个任务(开两个 terminal),就可以同时调试 Server 与 Web

更多关于 LeanCloud 构建部署的命令可以在LeanCloud官网找到。

参考资料

LeanEngine-Full-Stack

vue-cli

协议

MIT

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79877.html

相关文章

  • Vue.js+LeanCloud 单页面博客

    摘要:之前看了好多关于的东东,路由哇,状态管理呀,稀里糊涂的一堆东西,每个都相对独立,这些单独的和教程看起来觉得明白了,揉到一起不好说了就。。 之前看了好多关于 Vue.js 的东东,路由哇,状态管理呀,稀里糊涂的一堆东西,每个都相对独立,这些单独的 demo 和教程看起来觉得明白了,揉到一起不好说了就。。所以想结合起来写一写,作为一只前端汪怎么可以没有博客~ 写的过程中有一些心得和踩坑,后...

    Vultr 评论0 收藏0
  • 从零开始的个人技术博客

    摘要:大牛勿喷单页面博客简介一个前后端完全分离的单页应用线上地址点此查看响应式布局主页,关于,标签过渡动画文章显示和代码高亮技术栈前端状态管理路由语法解析后端服务端框架数据存储开发启动服务器端默认地址另开一个启动前端项目,默认地址构建部署在目录 大牛勿喷! Vue.js+LeanCloud单页面博客 简介 一个前后端完全分离的单页应用 线上地址点此查看 version 1.0 响应式布局...

    lifefriend_007 评论0 收藏0
  • 从零开始的个人技术博客

    摘要:大牛勿喷单页面博客简介一个前后端完全分离的单页应用线上地址点此查看响应式布局主页,关于,标签过渡动画文章显示和代码高亮技术栈前端状态管理路由语法解析后端服务端框架数据存储开发启动服务器端默认地址另开一个启动前端项目,默认地址构建部署在目录 大牛勿喷! Vue.js+LeanCloud单页面博客 简介 一个前后端完全分离的单页应用 线上地址点此查看 version 1.0 响应式布局...

    Youngdze 评论0 收藏0
  • 3年,从工程师到创始人

    摘要:我们的产品覆盖了和,目前项目全都架在的云引擎之上。我们的方案是把业务代码从中抽出来了,做成了移动端,这样业务能在和中共用,移动端是基于的云引擎环境下开发的。在这个过程中,云引擎和都发挥了重要作用。 【玩转 LeanCloud 】活动开发经验分享: 作者:黄涛 大家好,我是 htoooth,在一家电商公司做 Node.js 开发,爱折腾,喜欢追新语言,像 golang、elixir、cl...

    AlienZHOU 评论0 收藏0

发表评论

0条评论

wudengzan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<