nuxt.js简介与应用_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