Nuxt笔记_nuxt项目中generate使用方法

学习了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