Nuxt笔记
学习了Nuxt 官方文档写的非常详细,读完做个记录~api:Nuxt.js基本vue通用应用框架UI渲染服务器渲染静态化nuxt generate命令:为vue应用生成静态站点根据路由配置为cs架构予特性异步数据加载中间件支持布局流程图总结:取消手动nuxt generate调用AWS Lambda引用每次数据更新就重新动态化...
·
学习了Nuxt 官方文档写的非常详细,读完做个记录~
api:
Nuxt.js
基本
- vue通用应用框架
- UI渲染
- 服务器渲染
- 静态化
- nuxt generate命令:为vue应用生成静态站点
- 根据路由配置
- nuxt generate命令:为vue应用生成静态站点
- 为cs架构予特性
- 异步数据加载
- 中间件支持
- 布局
- 流程图
- 总结:
- 取消手动nuxt generate
- 调用AWS Lambda
- 引用
- 每次数据更新就重新动态化一下
- 取消手动nuxt generate
安装
- 模版
- 手动新建
- package.json
- Npm install —save nuxt
目录
- Layouts
- 布局目录为nuxt.js保留,不可更改
- components
- 组件目录,不可asyncData as页面组件
- middleware
- 中间件,在页面获取数据前对数据获取处理
- pages
- 页面目录,nuxt 给此下.vue自动生成路由
- static
- 静态文件,不会被nuxt构建编译
- store
- vuex状态树
- 用index.js激活
- vuex状态树
路由
- 基础路由
- 动态路由
- 下划线为前缀
- 路由参数校验
- vaildate({ param }){ return: }
- 嵌套路由
- 于文件夹同名的目录存放子视图组件
- 父组件
- 动态嵌套路由
- 过渡特效
- assets下创建main.css
- Transition
- assets下创建main.css
- 中间件
- middleware
- 定义一个函数 运行在页面渲染之前
- 接收context做第一参数
- 执行流程顺序
- Nuxt.config.js
- 匹配布局
- 匹配页面
- 使用
- router:{middleware:’stats’}
- middleware
视图
- 默认布局
- layouts/default.vue
- layouts/default.vue
- 错误页面
- layouts/error.vue
- 个性化布局
- layouts下
- 确保有
- 制定使用布局
- layout: ‘blog’
- layouts下
- 页面
- 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
- 开发使用
更多推荐
已为社区贡献1条内容
所有评论(0)