nuxt实践

利用手脚架搭起来的服务端渲染实例
目录结构
.nuxt
assets 未编译的静态资源如 LESS、SASS 或 JavaScript
components 用于组织应用的 Vue.js 组件
middleware 目录用于存放应用的中间件
pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue文件并自动生成对应的路由配置。
plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下
store 目录用于组织应用的 Vuex 状态树 文件,在 store 目录下创建一个 index.js 文件可激活这些配置
server 后端目录用于调用数据库提供接口

流程跑动
1.启动:webpack dev利用Backpack是node.js的简约构建系统启动服务,简单配置在backpack.config.js中
2.指定了启动文件./server/index.js,配置express基本配置,中间件body-parser处理后,就可以在所有路由处理器的req.body中访问请求参数,设置后端接口路由/api为api目录,根据nuxt配置文件nuxt.config.js初始化nuxt
3.server下的后端接口
index.js整合接口入口和session
article.js业务功能
users.js用户相关接口
db.js调用数据库模型
4.db.js链接mongoodb的Schema模型
5.article.js业务接口express的Router暴露接口路由
6.users.js用户信息接口

然后是到服务器上启动(http80端口或者https443接口)

用了mongoodb当数据库

都是一步一步查着写的不专业的,所以服务器部署不在这写

nuxt部署
最后,我们使用pm2来部署nuxt。
在对应目录
pm2 start npm --name nuxt -- start

原文地址:https://www.cnblogs.com/lichuntian/p/nuxt.html

时间: 2024-10-10 01:21:45

nuxt实践的相关文章

Nuxt.js服务端渲染实践,从开发到部署

感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,也成功说服了公司新项目采用前后端分离的解决方案,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队. 解决的问题 路由鉴权 第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地.官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP.转念一想

Doodoo.js 发布 1.1.0,Koa.js+ Nuxt.js 最佳实践

doodoo.js发布1.1.0 -- 中文最佳实践Node.js Web快速开发框架,支持Koa.js, Express.js中间件.包含多项功能改进,及Bug修复.更新内容: 1.[新增]新增支持.js7格式文件2.[新增]新增支持redis密码设置3.[更新]更新默认不连接mysql4.[新增]新增支持mongodb数据库5.[新增]新增支持设置api路由前缀6.[移除]移除默认static静态服务器7.[新增]新增static插件8.[新增]新增自定义plugin9.[新增]新增webh

Koa nuxt最佳实践前篇

从demo快速上手 首先我们下载demo git clone https://github.com/doodooke/doodoo-nuxt-demo.git 进入目录安装依赖和启动 yarn install && npm run dev 访问浏览器http://127.0.0.1:3000 原文地址:http://blog.51cto.com/14012945/2312169

后端渲染实践——看掘金社区是如何实践的

Vue.js.React.js 及 Angular.js 等等前端开发框架引入了 UI = framework(State) 的前端编程逻辑,大范围降低了前端业务开发的难度,尤其是面向复杂前端应用.而这些优质开源框架的普及.多端业务统一.前后端分离的需求让越来越多的架构设计将大部分业务逻辑写在了前端. 但是,纯前端产品也有着它的问题.上述的几个前端框架都支持了后端渲染的功能,从而融合了前后端的问题.如何有效地整合现有前端逻辑实现后端渲染.如何优化后端渲染性能.如何实现服务器流式吐内容更快地渲染页

Nuxt 2 即将来临

原文出处: ?? Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium [https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67] 1.4.0发布25天后,Nuxt2就即将来临.超过330次提交,320次更改文件,8,200次添加和7,000次删除(不包括其他nuxt repositories)!好吧,似乎很多变化,但不用担心,我们会尽最大努力减少breaking changes的数量,更多

Vue 工程化最佳实践

目录结构 总览 api 目录用于存放 api 请求,文件名与模型名称基本一致,文件名使用小驼峰,方法名称与后端 restful 控制器一致. enums 目录存放 常量,与后端的常量目录对应 icons 目录用于存放图标,element-ui 提供的图标实在是太少啦.所以我通常会使用 阿里的 iconfont lang 目录存放多语言 layouts 目录存放布局 上面展示的是一个后台系统,empty 为一个空布局.用于登录页面,其他页面则使用 default 布局.布局不需要过多介绍,写过 l

10秒钟构建你自己的”造轮子”工厂! 2019年github/npm工程化协作开发栈最佳实践

发起一个github/npm工程协作项目,门槛太高了!! 最基础的问题,你都要花很久去研究: 如何在项目中全线使用es2017代码? 答案是babel 如何统一所有协作者的代码风格? 答案是eslint + prettier 如何测试驱动开发,让项目更健壮? 答案是jest 如何持续化集成,方便更多协作者参与项目? 答案是circleci 这四样工具的配置,是每个github项目都会用上的.另外,gitignore配置.editconfig.readme.lisence...也是必不可缺的. 你

5.5 进入编辑模式 5.6 vim命令模式 5.7 vim实践

5.5 进入编辑模式 5.6 vim命令模式 5.7 vim实践 扩展 vim的特殊用法 http://www.apelearn.com/bbs/thread-9334-1-1.html vim常用快捷键总结 http://www.apelearn.com/bbs/thread-407-1-1.html vim快速删除一段字符 http://www.apelearn.com/bbs/thread-842-1-1.html vim乱码 http://www.apelearn.com/bbs/thr

分布式开放消息系统(RocketMQ)的原理与实践

分布式消息系统作为实现分布式系统可扩展.可伸缩性的关键组件,需要具有高吞吐量.高可用等特点.而谈到消息系统的设计,就回避不了两个问题: 消息的顺序问题 消息的重复问题 RocketMQ作为阿里开源的一款高性能.高吞吐量的消息中间件,它是怎样来解决这两个问题的?RocketMQ 有哪些关键特性?其实现原理是怎样的? 关键特性以及其实现原理 一.顺序消息 消息有序指的是可以按照消息的发送顺序来消费.例如:一笔订单产生了 3 条消息,分别是订单创建.订单付款.订单完成.消费时,要按照顺序依次消费才有意