项目介绍在线预览开发指南-快速入门这是一个完全由Vue全家桶实现的轻博客应用，完全使用Vuex管理所有状态数据并优化整体结构。后端应用程序是一个由Node.js开发的全栈应用程序。业余时间在GitHub上不断迭代版本，不断完善功能。LeanCloud提供数据存储服务（云服务）。项目源码Version4.0是完整的4.0版本。本次更新优化点主要增加了管理员权限和登录功能。现在只有管理员才能发布文章，为后期后台管理开发做铺垫。增加了分页功能，api有了新的变化，现在每页显示10篇最新文章。Markdown以Github风格呈现，再也不用担心页面风格被拒！修复之前的一些问题。.Version3.0初步完成3.0版本，完善前端PC端和移动端风格，包括全站响应式设计，以及文章markdown文章渲染，代码HightLight等，增加评论回复功能，完善自建api，文章发表在优雅的Markdown编辑器中。技术栈前端Vue.js2.0Vuex状态管理Vue-router前端路由axios网络请求fastclick解决移动延迟问题Element-UI后端Node.js服务器Express应用框架LeanCloud数据存储组件[x]Markdown渲染[x]回复样式页面[x]文章评论/回复[x]标签分类[x]浮动导航[x]文章发布[x]RESTfulAPI接口文件整体结构├──public//LeanEngineWeb前端发布目录，HTML\CSS\JavaScript构建后会放在这里├──server-modules//服务端代码模块目录│├──modules//后台数据模块│├──app//主入口LeanEngine服务端代码│├──api//API接口路由配置│└──tool//工具方法├──front-end//Web前端项目目录│├──build//前端开发环境│├──config//配置文件│└──src//源代码目录└──server//LeanEngine的环境配置版本迭代Version1.0-初始化1.0版本，只完成前后端api连接过程,发布和样式未完成2.0版本-初步完成2.0版本，完善前端PC端和移动端样式，包括全站响应式设计，以及文章markdown文章渲染，代码HightLight等，增加评论回复功能.3.0版本-增加了Post发布文章的功能，并借用了Vue数据双向绑定的特性，实时展示Markdown编辑的效果。下个版本会继续完善发布功能，增加已有文章的管理功能。4.0版本——完整的4.0版本，本次更新优化点主要是增加了管理员权限、分页、Github风格渲染，并修复了之前的一些问题。.开发项目充分结合了LeanCloud的优势，这也让我们可以快速的使用JavaScript搭建一个可以在线应用的web应用。主要内容可以参考源码。下面简单说明一下每次开发的注意点。LeanCloud配置，使用Vue-Cli初始化项目后，npmileanengine安装LeanCloud的核心依赖。之后，只需触摸项目根目录中的server.js即可。主要操作详见[LeanCloud官方文档]()'usestrict';varAV=require('leanengine');AV.init({appId:process.env.LEANCLOUD_APP_ID,appKey:process.env.LEANCLOUD_APP_KEY,masterKey:process.env.LEANCLOUD_APP_MASTER_KEY});varapp=require('./server-modules/app');//端口必须从环境变量`LEANCLOUD_APP_PORT`中获取。//LeanEngine运行时，会分配端口，赋值给这个变量。varPORT=parseInt(process.env.LEANCLOUD_APP_PORT||3000);app.listen(PORT,function(){console.log('Nodeappisrunning,port:',PORT);});});deploymentonline安装leancloud部署工具brewinstalllean-cli。详见LeanCloud网站托管后台Api搭建支持数据存储，可以直接发挥Express的作用，定义文章等模块的数据模型，定义数据接口。可以使用leanup启动后端Node.js服务器并打开界面。constrouter=require('express').Router();//添加路由模块constcontent=require('./modules/content');//博客数据模型//路由设置router.get('/content-list',content.contentList);//GET博客列表router.get('/article/:id',content.article);//GET博客详情router.post('/article/submitArticle',content.submitArticle);//发布博客Vuex定义了每个需要管理的数据模块，定义了自己的state和mutations，前端和后端的交互通过action来处理，然后我们就可以在各个页面调度我们的数据了。//vuex/store.jsexportdefaultnewVuex.Store({strict:debug,actions,modules:{contentList,article,commentsList,tags,tagContentList}})//vuex/actions.jsgetContentList({commit}){commit(types.REQUEST_CONTENT_LIST)axios.get(API_ROOT+'api/content-list').then(response=>{commit(types.GET_CONTENT_LIST,response.data)console.log('getContentListsuccess');}).catch(error=>{commit(types.GET_CONTENT_LIST_FAILURE,error)})}Vue-Router定义了前端路由来优化页面跳转速度。exportdefaultnewRouter({mode:'history',routes:[{path:'/',name:'Index',component:function(resolve){require(['@/views/Index'],resolve)}},{path:'/article/:id',name:'article',组件:function(resolve){require(['@/views/Article'],resolve)}}}],scrollBehavior(to,from,savedPosition){//路由切换时滚动到顶部if(savedPosition){returnsavedPosition}else{return{y:0}}}})FastClick消除移动端双击延迟fastClick.attach(document.body)//消除移动端双击延迟运行截图本地预览步骤//克隆项目源码$gitclonexxxxxxxxxxxxxxx//安装服务器相关依赖$cdohmo$npminstall//启动服务器，默认地址为http://localhost:3000（需要提前注册leancloud账号）$leanup//安装前端相关依赖$cdfront-end$npminstall//启动前端项目，默认地址为http://localhost:8080$npmrundevbuilddeployment//在前面将-end目录下的前端文件构建到/public文件夹下$npmrunbuild//leancloud命令行deployment在根目录下目录/通过github部署$leandeploy/leandeploy-gservice在线指南首先提到了我们在线提交代码的过程。上线服务器只需要我们最终的服务器文件和构建好的前端文件，也就是根目录下public文件夹下的东西在完成每一个开发内容后，记得在前端执行npmrunbuildcodebuild-结束前端项目。您可以注意到根目录中的server.js文件。推送代码后，会自动执行nodeserver.js启动nodeserver。有关配置，请参阅package.json中的脚本部分。当然，你也可以使用你喜欢的方法来定义。"scripts":{"test":"echo\"Error:notestspecified\"&&exit1","start":"nodeserver.js"},看看server.js需要做什么，'usestrict';varAV=require('leanengine');AV.init({appId:process.env.LEANCLOUD_APP_ID,appKey:process.env.LEANCLOUD_APP_KEY,masterKey:process.env.LEANCLOUD_APP_MASTER_KEY});//如果不想使用masterKey权限，可以删掉下面这行AV.Cloud.useMasterKey();varapp=require('./server-modules/app');//端口必须从环境变量`LEANCLOUD_APP_PORT`。//LeanEngine运行时，会分配端口，赋值给这个变量。varPORT=parseInt(process.env.LEANCLOUD_APP_PORT||3000);app.listen(PORT,function(){console.log('Nodeappisrunning,port:',PORT);//注册全局未捕获异常处理流程.on('uncaughtException',function(err){console.error("Caughtexception:",err.stack);});process.on('unhandledRejection',function(reason,p){console.error("未处理的拒绝：Promise",p,"reason:",reason.stack);});});其实就是一些配置，比如启动nodeserver，连接leancloud的一些验证信息。如有异常，将显示错误信息打印等工作。最后要说的就是部署工作了。由于是免费测试应用，所以生产环境只有一个，与环境无关。我们使用的部署方式可以使用官方提供的一套命令行工具来完成。安装方法：（执行以下命令，需要提前安装brew）brewinstalllean-cli安装完成后，如果在命令行执行lean，可以看到提示，说明安装成功，然后继续下一步。在项目根目录下，登录leancloud账号，完成当前项目与在线创建应用的绑定。如果项目是第一次绑定，请先进行leaninit初始化。leanlogin//输入邮箱&密码//登录成功后leaninit//可以看到已经创建的应用，选择完成绑定，绑定我们的应用后可以输入leanswitch来切换应用，为了防止部署后出现问题，可以执行leanup尝试在本地启动服务，检查应用是否正常启动。如果报错，请检查本地端口是否被占用，并进行更改。如果一切顺利，在根目录下执行leandeploy，即可完成代码的在线部署。因为是免费测试服务器，服务可能会时不时访问不上，一段时间不访问会自动进入休眠状态，也就是需要等待服务上线重启时唤醒，需要很长时间。部署完成后，访问我们在线填写的url，就可以在线看到我们的应用了。有了我们可以玩的云服务器，我们可以做一些其他有趣的事情，比如爬虫等等，就看你的想法了。呵呵
