nuxt基础一

不过在 Nuxt.js 框架中，我们有了新的变化，layouts对应目录中的layouts文件夹，默认pages下的页面走的都是 layouts/default.vue 布局方式，
但是如果自己定义的话，也可以新增新的布局页。其中<nuxt/>可以类似vue中slot插槽的概念，（如果对 slot 插槽不是很明白，
可以看之前的文章 《二十║Vue基础终篇：组件详解+项目说明》的第四节），pages/**.vue中的内容会插在<nuxt/>内。

<template>
  <div class="layout-search">
    <h1>layout search</h1>
    <nuxt />
    <footer>layout footer</footer>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped lang="css">
.layout-search {
  color: red;
}
</style>

<template>
  <div></div>
</template>

<script>
export default {
  layout: 'search',
  data() {
    return {}
  },
}
</script>

<style scoped lang="css"></style>

module.exports={
  
  dev: process.env.NODE_ENV !== 'production',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'mt-app',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['element-ui/lib/theme-chalk/index.css','~assets/css/main.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['@/plugins/element-ui'],

css: [ 'element-ui/lib/theme-chalk/index.css', { src: '@/assets/css/main.scss', lang: 'scss' } ],

import Router from 'koa-router'

const router = new Router({
  prefix: '/city',
})

router.get('/list', async (ctx) => {
  ctx.body = {
    list: ['beigjin', '天津'],
  }
})

export default router

import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
import cityInterface from './interface/city'

async function start() {
  const app = new Koa()
  const host = process.env.HOST || '127.0.0.1'
  const port = process.env.PORT || 3000

  // Import and Set Nuxt.js options
  const config = require('../nuxt.config.js')
  config.dev = !(app.env === 'production')

  // Instantiate nuxt.js
  const nuxt = new Nuxt(config)

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }
　//固定写法
  app.use(cityInterface.routes()).use(cityInterface.allowedMethods())
  app.use(ctx => {
    ctx.status = 200
    ctx.respond = false // Mark request as handled for Koa
    ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
    nuxt.render(ctx.req, ctx.res)
  })

  app.listen(port, host)
  console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
}

start()

 "scripts": {
    "dev": "nodemon server/index.js --exec babel-node",

1.在mouted发送异步请求，浏览器中有动态数据渲染，页面会展示数据，但是源码没有数据，因为在服务端渲染不执行mouted函数

2.在asyncData发送异步请求,会在服务端渲染数据，但是里头没有this（组件实例的），默认是80端口，数据出来没有闪烁（浏览器渲染会闪烁），因为在服务器短渲染的，源码是有数据的

<template>
  <div>
    Page is search
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  layout: 'search',
  data() {
    return {
      list: [],
    }
  },

  // async  mounted(){
  //   const {status, data:{list}} = await axios.get("/city/list")
  //   if(status ===200){
  //     this.list = list
  //   }

  // },

  async asyncData() {
    const { status,data: { list },} = await axios.get('http://localhost:3000/city/list')
    if (status === 200) {
      return {
        list
      }
    }  
  },

  //  async fetch() {
  //   const { status,data: { list },} = await axios.get('http://localhost:3000/city/list')
  //   if (status === 200) {
  //     return {
  //       list
  //     }
  //   }  
  // },
}
</script>

<style scoped lang="css"></style>

export const state = () => ({
  inis: ['a', 'b']
})

export  const mutations = {
  INCREASE(state, text) {
    state.inis.push(text)
  }
}

export const actions = {
  increase({commit}, text){
    commit('INCREASE', text)
  }
}

export const state = () => ({
  list: ['a', 'b']
})

export  const mutations = {
  ADD(state, text) {
    state.list.push(text)
  }
}

export const actions = {
  add({commit}, text){
    commit('ADD', text)
  }
}

<template>
  <div>
    Page is search
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
 import { mapState, mapMutations, mapActions } from 'vuex';
// import axios from 'axios'
export default {
  layout: 'search',
  data() {
    return {
      
    }
  },
  computed:{
      //  ...mapState(['list'])
      ...mapState({
        list:(state)=> state.city.list
      })
  },

  methods:{
    // ...mapMutations('city',['ADD'])
    ...mapActions('city',['add']),
 
  }