nuxt实践

it2022-05-05  132

利用手脚架搭起来的服务端渲染实例目录结构.nuxtassets 未编译的静态资源如 LESS、SASS 或 JavaScriptcomponents 用于组织应用的 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初始化nuxt3.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

转载于:https://www.cnblogs.com/lichuntian/p/nuxt.html

相关资源:nuxt.js 缓存实践

最新回复(0)