nuxt

作者: storyWrite | 来源:发表于2021-11-28 11:55 被阅读0次

    服务端渲染

    传统服务端渲染

    • image.png

    单页面应用 SPA

    image.png

    nuxt 是什么

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

    • 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。

    • 就使用而言,组件写法基本和vue相差不大,区别在于几个钩子函数,以及一些服务端渲染相关的东西

    nuxt特性

    • 基于 Vue.js
    • 自动代码分层
    • 服务端渲染
    • 强大的路由功能,支持异步数据
    • 静态文件服务
    • ES2015+ 语法支持
    • 打包和压缩 JS 和 CSS
    • HTML 头部标签管理
    • 支持各种样式预处理器: SASS、LESS、 Stylus 等等

    优点

    • 利于seo,一般购物类网站都需要seo优化
    • 首屏渲染速度更快
      • 原因是:服务端渲染只需要进行一次网络请求,而客户端渲染需要先请求运行所需文件,运行之后再进行网络请求数据,然后加载页面

    缺点

    • 对于服务器要求比客户端渲染高

    使用介绍

    1.目录结构介绍

    image.png
    • assets
      主要用于组织未编译的静态资源如LessSASS.....
    • components
      主要用来存放组件,且其不能使用asyncData函数
    • layouts 布局目录
      用于进行页面布局,例如公共导航栏,footer布局
    • plugins
      存放一些插件配置,只会执行一次,比如axios的拦截器添加token
    • middleware
      中间件,可以进行一些,权限验证之类的,全局的中间件,每次进入不同的路由都会执行
    • pages 页面目录
      nuxt采用约定式路由,不需要配置,文件路径名即为路由地址
      例如
      页面地址
    --| user/
    -----| index.vue
    -----| one.vue
    --| index.vue
    

    对应路由地址为

    router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue'
        },
        {
          name: 'user',
          path: '/user',
          component: 'pages/user/index.vue'
        },
        {
          name: 'user-one',
          path: '/user/one',
          component: 'pages/user/one.vue'
        }
      ]
    }
    
    • static 静态文件目录
      此目录下的文件不会被编译打包,服务器启动后会直接将其映射至根目录
      例如static/story.txt => /story.txt
    • store
      vuex相关配置
    • nuxt.config.js
      关于项目的一些配置,例如插件,中间件,路由,seo优化标签等

    2.路由(约定式:按照约定方式使用,不需要使用者额外配置)

    • 基础路由
      假设 pages 的目录结构如下:
    pages/
    --| user/
    -----| index.vue
    -----| one.vue
    --| index.vue
    

    那么,Nuxt.js 自动生成的路由配置如下:

    router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue'
        },
        {
          name: 'user',
          path: '/user',
          component: 'pages/user/index.vue'
        },
        {
          name: 'user-one',
          path: '/user/one',
          component: 'pages/user/one.vue'
        }
      ]
    }
    
    • 动态路由
      在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

    以下目录结构:

    pages/
    --| _slug/
    -----| comments.vue
    -----| index.vue
    --| users/
    -----| _id.vue
    --| index.vue
    

    Nuxt.js 生成对应的路由配置表为:

    router: {
      routes: [
        {
          name: 'index',
          path: '/',
          component: 'pages/index.vue'
        },
        {
          name: 'users-id',
          path: '/users/:id?',
          component: 'pages/users/_id.vue'
        },
        {
          name: 'slug',
          path: '/:slug',
          component: 'pages/_slug/index.vue'
        },
        {
          name: 'slug-comments',
          path: '/:slug/comments',
          component: 'pages/_slug/comments.vue'
        }
      ]
    }
    

    你会发现名称为 users-id 的路由路径带有 :id? 参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在 users/_id 目录内创建一个 index.vue 文件。

    • 路由参数校验
      Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

    举个例子: pages/users/_id.vue

    export default {
      validate({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
      }
    }
    

    如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error , Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面
    类似于vue路由导航功能

    3. 布局

    • 默认布局
      可通过添加layouts/default.vue文件来扩展应用的默认布局。

    提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

    默认布局的源码如下:

    <template>
      <nuxt />
    </template>
    
    • 自定义布局
      layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

    假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

    <template>
      <div>
        <div>我的博客导航栏在这里</div>
        <nuxt />
      </div>
    </template>
    

    然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局:

    <template>
      <!-- Your template -->
    </template>
    <script>
      export default {
        layout: 'blog'
        // page component definitions
      }
    </script>
    
    • 错误处理
      你可以通过编辑 layouts/error.vue 文件来定制化错误页面.
      这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误(404,500 等)的组件。
    <template>
      <div class="container">
        <h1 v-if="error.statusCode === 404">页面不存在</h1>
        <h1 v-else>应用发生错误异常</h1>
        <nuxt-link to="/">首 页</nuxt-link>
      </div>
    </template>
    
    <script>
      export default {
        props: ['error'],
        layout: 'blog' // 你可以为错误页面指定自定义的布局
      }
    </script>
    

    4.钩子函数

    image.png
    • asyncData
      • 返回的数据会合并在data中
      • 只能在pages下调用
      • 该方法在组件实例化之前调用,无法通过this访问组件实例
    export default {
      async asyncData({ params }) {
        const { data } = await axios.get(`https://my-api/posts/${params.id}`)
        return { title: data.title }
      }
    }
    
    • fetch
      • fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
    <script>
      export default {
        async fetch({ store, params }) {
          await store.dispatch('GET_STARS')
        }
      }
    </script>
    
    • create
      • 会在服务端执行,如果不是服务端渲染,数据请求最好放在beforeMount及之后的钩子中
    • beforeMount/mounted/updated/beforeDestroyed/destroyed
      • 其余钩子跟vue类似

    项目中使用到的一些技术

    nuxt相关

    1.全局混入/局部混入/全局注册组件

    可以用于弹窗/加载态....

    2. inject 插件注入

    注入

    export default function (ctx, inject) {
    const login = () => {}
      inject(login)
    

    使用

    this.$login()
    

    诸如一些登录,退出或者一些api请求方法可以使用此方法注入,更加简洁优雅,或者嵌套组件使用方便数据传递
    此配置需要在nuxt.config.js 配置

    3. nuxtServerInit

    store/index.js

    export const actions = {
      async nuxtServerInit({ dispatch }, ctx) {
        // 一些状态初始化或者token设置
      }
    };
    
    

    第三方插件等

    1. sa-sdk-javascript

    神策分析,是针对企业级客户推出的深度用户行为分析产品,支持私有化部署,客户端、服务器、业务数据、第三方数据的全端采集和建模,驱动营销渠道效果评估、用户精细化运营改进、产品功能及用户体验优化、老板看板辅助管理决策、产品个性化推荐改造、用户标签体系构建等应用场景。作为 PaaS 平台支持二次开发,可通过 BI、大数据平台、CRM、ERP 等内部 IT 系统,构建用户数据体系,让用户行为数据发挥深远的价值。
    简而言之,就是对用户行为进行数据分析

    2. js-cookie

    用于cookie 的设置

    3.tailwindcss

    css框架

    • 提供了简洁的class类名语法
    • 响应式布局.........等


      image.png
      image.png
    4.isMobile

    判断当前环境是否为移动端

    5.文本提示toolTip
    image.png

    部署

    • 发布部署
      • 先编译再启动服务,生成文件在./nuxt/dist
    npm run build
    npm start
    

    +静态应用部署

    • 需要渲染以及接口都可用,生成文件在根目录下dist
    • 所有生成的页面都是静态的,适用于博客等
    npm run generate
    

    seo相关

    image.png

    相关文章

      网友评论

          本文标题:nuxt

          本文链接:https://www.haomeiwen.com/subject/afwcxrtx.html