Nuxt学习笔记

参考地址：https://zh.nuxtjs.org/guide/installation  官网

                 http://jspang.com/2018/02/26/nuxt/

1、目录结构

2、Nuxt常用配置项

配置IP和端口：

package.json

     

配置全局的css:

在assets里面创建文件：

在nuxt.config.js里面配置

配置webpack的loader

在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

例：

build: {
 
    loaders:[
      {
        test:/.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:'img/[name].[hash].[ext]'
        }
      }
    ],
 
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }

 3、路由配置

可以直接使用a标签，不过推荐用nuxt自带的标签<nuxt-link>

4、路由动画效果

5、默认布局和默认模板

6、错误页面和meta设置

7、异步获取数据，需要用到 axios

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2>
 
     
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
      
  }
}
</script>