nuxt.js学习(一)

1. 启用store

   1. 在store中创建index文件的时候，可以直接使用，state/mutations等直接导出

      export const state = () => ({
        counter: 20
      })
      
      export const mutations = {
        increment(state) {
          state.counter++
        }
      }
      
      

   2. 使用方法

       import { mapState } from 'vuex'
       computed: {
          ...mapState(['counter']),
          // ...mapState('todos', ['list'])
        }
      

2. 全局api方法

   1. plugins文件中 创建一个文件，使用api

      import axios from 'axios'
      const link = {
        aa: 'http://106.12.122.161:3001/user/alldata/getAllRzdata?limit=8&skip=0'
      }
      export default ({ app }, inject) => {
        inject('axios', {
          login: {
            get(string) {
              return axios.get(link[string])
            }
          }
        })
      }
      
      

   2. 在需要使用的地方

      // async asyncData(context) {
        //   const aa = await context.app.$axios.login.get('aa')
        //   console.log(aa.data.data)
        // },
        
        const axios:any = this.$axios
          axios.login.get('aa').then((res:any) => {
            console.log(res)
          })
      

   3. nuxt.config.js中配置

       plugins: [
          '~/plugins/todos.js'
        ],
      

3. 资源管理

   当文件放在static的时候，可以直接使用而不需要require
   <img :src="src + '.png'" alt="">
   src: 'wly'		// 一级
   background-image: url('static/home/wly.png');		// 二级
   

4. 布局页面

   1. 可以定义多个布局，默认布局是通用于所有的页面上，而自定义布局需要单独设置layout属性

   2. layouts可以定义error页面, 同时 layout: ‘blog’ // 你可以为错误页面指定自定义的布局

   3. 同时支持多个属性asyncData/fetch/head/layout/loading/transition/scrollToTop/validate/middleware

      head: {
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' }
        ],
        link: [
          { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
        ]
      }
      

5. 过渡效果

   1. 全局

      // 在全局样式文件 assets/main.css 里添加一下样式
      
      .page-enter-active,
      .page-leave-active {
        transition: opacity 0.5s;
      }
      .page-enter,
      .page-leave-active {
        opacity: 0;
      }
      
      // nuxt.config.js
      module.exports = {
        css: ['assets/main.css']
      }
      

   2. 局部

      // 页面组件中配置 `transition` 字段即可
       
      // 在全局样式 assets/main.css 中添加一下内容：
       .test-enter-active,
      .test-leave-active {
        transition: opacity 0.5s;
      }
      .test-enter,
      .test-leave-active {
        opacity: 0;
      }
      
      // 页面组件内
      transition: 'test'
      

6. 中间件

   中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前

   一个中间件接收 context 作为第一个参数：

   export default function (context) {
     context.userAgent = process.server
       ? context.req.headers['user-agent']
       : navigator.userAgent
   }
   

   详细配置 https://www.nuxtjs.cn/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6

   可用于 每个路由改变时被调用 作为路由拦截

7. nuxt-link