当前位置:   article > 正文

nuxt.js简介与应用_nuxtjs 可以用来开发什么样的项目

nuxtjs 可以用来开发什么样的项目
  1. nuxt是什么
    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。
  2. 适用于场景
    Nuxt.js适合作新闻、博客、电影、咨询等需要搜索引擎提供流量的项目。
  3. 特点
    基于 Vue.js
    自动代码分层
    服务端渲染
    强大的路由功能,支持异步数据
    静态文件服务
    ES6/ES7 语法支持
    打包和压缩 JS 和 CSS
    HTML头部标签管理
    本地开发支持热加载
    集成ESLint
    支持各种样式预处理器: SASS、LESS、 Stylus等

默认布局
layouts文件里面的defauit.vue文件

添加默认全局模板
文件根目录下添加app.html(需要重启服务生效)在这里插入图片描述
路由
nuxt会根据pages下面的文件自动创建路由

普通路由跳转
在这里插入图片描述
动态路由传参(接收{{$route.params.id}})
在这里插入图片描述

nuxt的asyncData方法

  async asyncData() {
    return axios
      .get("./data/test.json")
      .then(res => {
        console.log(res);
        return { detail: res.data };
        //return返回数据,组件创建之前就进行的动作,所以不能使用this
      })
      .catch(e => {
        console.log("失败");
      });
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

~符号用法

  nuxt提供 ~ 符号用于直接访问根目录
  <img src="~static/qq.jpg" alt="">
  • 1
  • 2
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/971535
推荐阅读
相关标签
  

闽ICP备14008679号