利用手脚架搭起来的服务端渲染实例
目录结构
.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

问题:

给webpack扩展插件的时候该扩展方法会被调用两次,一次在服务端打包构建的时候,另外一次是在客户端打包构建的时候

https://zh.nuxtjs.org/api/configuration-build/#extend可配置的比如下面的Jarvis监控插件

const Jarvis = require("webpack-jarvis");

extend (config, ctx) {
  if (ctx.isDev && !ctx.isServer) {
    config.plugins.push(new Jarvis({
    port: 1337 // optional: set a port
  }))
}

需要具备的知识:

前端基础(html+css+js)

vue全家桶

elementUI

Node + Express  + mongoodb(懂一点就可以了)

最好还懂一点webpack

参考:

https://blog.csdn.net/weixin_41826907/article/details/81475154   (这个讲的超详细)

https://vuefe.cn/

https://router.vuejs.org/zh/

http://element.eleme.io/#/zh-CN

https://zh.nuxtjs.org/

https://www.jianshu.com/p/4763fa689d19

https://blog.csdn.net/sunscheung/article/details/79171608

免费域名:https://my.freenom.com/

免费dns:www.dnspod.com

nuxt实践的更多相关文章

  1. Nuxt框架实践

    前言 今天抽空过了遍nuxt文档,写了个实践demo,关于nuxt我已经断断续续看了好几遍了,自我感觉也算是入门了吧,从开发到上线心里都有底.后期打算在项目用起来的是nuxt框架,一些函数工具库,比如 ...

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

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  3. 🏃‍♀️点亮你的Vue技术栈,万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

  4. go, iris , nuxt, 服务端渲染等技术在helloworld开发者社区中的应用与实践

    大家好,helloworld.net 上线已经有近半年的时间了,转眼过的好快,在这半年的时间里,迭代了近10多个版本,优化了很多的体验,交互上的不足之处,同时也上线了我们的安卓 app, 苹果的因为还 ...

  5. Nuxt.js项目实战

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  6. Nuxt.js实践篇

    nuxt.js 追求完美,相信大家都是这样的.因为前后端分离的弊端性,在项目构建时,浏览器并不会捕捉到项目的内容,所以开始,笔者决定引入nuxt.js文件来配合vue完成Server Slider R ...

  7. Nuxt开发搭建博客系统

    nuxt.js第三方插件的使用?路由的配置pages目录自动生成路由layoutsdefault.vueerror.vueVuex的使用权限篇Mysqladvice nuxt.js 追求完美,相信大家 ...

  8. nuxt.js实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...

  9. Vue 工程化最佳实践

    目录结构 总览   api 目录用于存放 api 请求,文件名与模型名称基本一致,文件名使用小驼峰,方法名称与后端 restful 控制器一致.   enums 目录存放 常量,与后端的常量目录对应 ...

随机推荐

  1. Git Shell Warning

    Warning: Permanently added 'github.com,192.30.252.120' <RSA> to the list of known hosts. The a ...

  2. laravel登录后台500错误!

    登录页面正常显示,填写完用户名密码 点登录后 页面一片空白,没有任何输出.debug可以看到一个500错误,preview和response都是空的.追踪了一下 发现在public/index.php ...

  3. 1123 Is It a Complete AVL Tree(30 分)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  4. BZOJ2467五角形生成树——数学

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2467 可以得出只需在每个五角形中去掉任意一条边,在某个五角形中去掉包括内边的两条边即可. 代码 ...

  5. C#中如何获取其他进程的命令行参数 ( How to get other processes's command line argument )

    Subject: C#中如何获取其他进程的命令行参数 ( How to get other processes&apos;s command line argument )From: jian ...

  6. DataGridColum的bug

    Datagrid有多个bug: 1,不支持DynamicResource的东西 2, 在Column隐藏后再显示, ColumnHeader的Tag或者DataContext为null. 解决办法: ...

  7. mongodb主从复制配置

    dbpath=/home/mongodb/data logpath=/home/mongodb/log/mongodb.log logappend=true port= fork=true noaut ...

  8. ubuntu 14.04 部署Django项目

    一.购买服务器 推荐 vultr的服务器,还可以_ _ _,链接:传送门 操作系统建议选 ubuntu 14.04 64位 二.购买域名 链接:传送门 三.安装相关软件 # 创建一个叫mu的用户 ro ...

  9. NFS原理详解

    NFS原理详解 摘自:http://atong.blog.51cto.com/2393905/1343950 2013-12-23 12:17:31 标签:linux NFS nfs原理详解 nfs搭 ...

  10. HDU 5546 Ancient Go (搜索)

    题意: Alice和Bob正在下古代围棋,规则如下: 棋盘有8×8个格子,棋子下在棋盘的交叉点上,故可以有9×9个落子的位置 Alice执黑棋Bob执白棋轮流落子 与棋子直线相连的空白交叉点叫做气.当 ...