zoukankan      html  css  js  c++  java
  • 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

     问题:

    给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

  • 相关阅读:
    从a文件判断是否删除b文件中的行(sed示例)
    绝对路径的表示方式为什么是"/usr"而不是"//usr"
    判断ssh远程命令是否执行结束
    彻底搞懂shell的高级I/O重定向
    Resource Agent:LSB和OCF
    流程控制语句(MySQL/MariaDB )
    MySQL/MariaDB中游标的使用
    翻译:DECLARE HANDLER语句(已提交到MariaDB官方手册)
    从集合的无序性看待关系型数据库中的"序"
    MariaDB/MySQL存储过程和函数
  • 原文地址:https://www.cnblogs.com/lichuntian/p/nuxt.html
Copyright © 2011-2022 走看看