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:,
           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>