学习了Nuxt 官方文档写的非常详细,读完做个记录~
nuxt笔记

api:
Nuxt api

Nuxt.js

基本

  • vue通用应用框架
  • UI渲染
  • 服务器渲染
  • 静态化
    • nuxt generate命令:为vue应用生成静态站点
      • 根据路由配置
  • 为cs架构予特性
    • 异步数据加载
    • 中间件支持
    • 布局
  • 流程图
  • 总结:
    • 取消手动nuxt generate
      • 调用AWS Lambda
    • 引用
      • 每次数据更新就重新动态化一下

安装

  • 模版
  • 手动新建
    • package.json
    • Npm install —save nuxt

目录

  • Layouts
    • 布局目录为nuxt.js保留,不可更改
  • components
    • 组件目录,不可asyncData as页面组件
  • middleware
    • 中间件,在页面获取数据前对数据获取处理
  • pages
    • 页面目录,nuxt 给此下.vue自动生成路由
  • static
    • 静态文件,不会被nuxt构建编译
  • store
    • vuex状态树
      • 用index.js激活

路由

  • 基础路由
  • 动态路由
    • 下划线为前缀
    • 路由参数校验
      • vaildate({ param }){ return: }
  • 嵌套路由
    • 于文件夹同名的目录存放子视图组件
    • 父组件
  • 动态嵌套路由
  • 过渡特效
    • assets下创建main.css
      • Transition
  • 中间件
    • middleware
      • 定义一个函数 运行在页面渲染之前
    • 接收context做第一参数
    • 执行流程顺序
      • Nuxt.config.js
      • 匹配布局
      • 匹配页面
    • 使用
      • router:{middleware:’stats’}

视图

  • 默认布局
    • layouts/default.vue
  • 错误页面
    • layouts/error.vue
  • 个性化布局
    • layouts下
      • 确保有
      • 制定使用布局
        • layout: ‘blog’
  • 页面
    • vue组件plus nuxt给的特殊配置项(asyncData, fetch, head..)看配置
  • html头部
    • vue-meta更新
    • 子主题

异步数据asyncData方法

  • 在设置组件数据前异步获取或处理数据
  • 第一个参数设定为当前上下文对象
  • 返回给data给组件
  • 无法使用this引用组件对象
  • 使用
    • 返回promise
    • async或await
    • 回调函数

资源文件(webpack是否处理)

  • 是:放在assets目录
    • 加载器
    • vue-loader
    • File-loader
    • URL-loader
  • 否:放在static目录
    • 使用/在根目录引用静态资源

插件plugin

  • axios做http请求
    • 安装npm包
    • import
    • get
  • 使用vue插件
    • import
    • Nuxt.config.js 配置 plugins
      • vendor配置项配置
    • ssr:false
  • vuex状态树
    • 使用
      • 引用vuex模块
      • vendor配置项配置
      • 设置vue根实例store配置项
    • 方式
      • 普通方式
        • store/index.js返回vuex.store实例
      • 模块方式
        • index根模块,其他模块转化成子模块
    • fetch方法
      • 渲染页面前
      • 填充状态树
    • nuxtServerInit
      • 设置在index.js中

命令

  • nuxt
    • 启动热加载
  • nuxt build
    • 利用webpack编译(发布时)
  • nuxt start
    • 先执行nuxt build,再启动服务器
  • nuxt generate
    • 编译,生成对应HTML文件
  • 总结
    • 开发使用
      • nuxt
      • npm run dev(需配置package.json)
    • 发布部署
      • 1 nuxt build
      • 2 nuxt start
Logo

前往低代码交流专区

更多推荐