zoukankan      html  css  js  c++  java
  • Nuxt 服务端渲染

    前言

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    ssr 渲染服务端 可以看官方文档 https://zh.nuxtjs.org/guide/

    nuxt 与平常 jsonp 不一样 ,jsonp点击跳转是跳转到新的页面

    而 Nuxt 而是打开路由,在一个页面里 这就是 取了中间件

    好处

    1.不仅用于服务端渲染也可用于spa 应用开发
    2.异步记载,中间件支持
    3.nuxt可用网站静态化

    这是流程:

    创建

     npm creat-nuxt-app <项目名>

    运行: npm run dev

    有张图来说明

    目录:

     创建项目的时候是这样的:

     然后就可以看到

     这样就创建了一个NUXT项目

    路由

    <nuxt-link to="/users"> 用户列表</nuxt-link>

    动态路由

    以下划线作为前缀的为vue文件或者目录成为动态路由

    pages/

        -- | users/

        ------ |_id.vue

     id 是必选参数,如果user里面没有index.vue,那将视为可选参数

    还有就是路由守卫

    在plugins 文件夹目录下:创建 router.js 文件:

    就像这样

    然后就在可以在路由首位里做些事情

    然后再nuxt.config.js 文件下导入

     

     然后要从新刷新

    二级 参数 多个参数传参 

    //uers/:id/:name?

    视图

    下图展示了如何为制定路由配置和视图

    自定义布局:

    创建layouts/users.vue

    如图:

     

     里面可以写 顶部菜单 这样就不用在路由里面写了 

    页面

    页面组件实际上是vue 组件,只不过Nuxt为这些组件添加一些特殊配置项

    异步数据获取

    asyncData 可以让我们在设置组件的数据之前能异步获取处理数据

    (beforeCreact 生命周期之前,服务端和客户端都会执行,执行非常靠前)

    代码:

     

     然后可根据 process.server. 来判断是在客户端还是服务端  true (服务端)

     

    整合 axios

     在server 文件目录下创建api.js

     nodemon  .api.js  运行

    拦截器的应用

     Vuex 

    如果跟目录下存在store 目录,则nuxt将启用 vuex

    fetch的使用

    如果页面组件设置了fetch方法,它会在组件每次加载前被调用 (在服务端或切换至目标路由之前,比ayncData还前),

    此方法需要跟服务端的人员配合

     

    下面就是实战了

    构建思路

     拦截器 : 就是看参数是否正确,用户是否正确认证,从而做出正确的相应

    生命周期  beforeCreate 和create 都会在 服务端和客户端 发生  fetch 也会

    就自学了这么多,还要在多加学习  

    加油呀少年

  • 相关阅读:
    小伙子的毕业设计
    mongoDB
    Java面试题笔试题收集
    react-router4 介绍
    React 组件间通信 总结
    react ajax
    react应用(基于react脚手架)
    React 之 组件生命周期
    组件收集表单数据
    组件的组合使用
  • 原文地址:https://www.cnblogs.com/yf-html/p/11930712.html
Copyright © 2011-2022 走看看