nuxtjs的初使用

1.安装

$ npx create-nuxt-app <项目名>
//或者
$ yarn create nuxt-app <项目名>

2.路由

只要在page目录下生成vue文件 nuxtjs就会自动将改组件添加到路由中去

++ 在page文件中创建目录

接下来就可以直接用
http://localhost:3000/news
访问了

++动态路由
动态路由只要在vue文件命名的时候加上下划线
例如

这样就可以直接访问了

++路由嵌套
在目录下创建一个vue文件 同时在同级目录下要创建一个同名的文件夹
例如 movie.vue和vue文件夹

movie中的代码

<template>
  <div>
    <h1>这是电影首页</h1>
    <nuxt-link to="/movie/one">第一个电影</nuxt-link>
    <nuxt-link to="/movie/two">第二个电影</nuxt-link>
    <nuxt-link to="/movie/three">第三个电影</nuxt-link>
    <nuxt-link to="/movie/list">电影数据</nuxt-link>
    <nuxt-child></nuxt-child>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {

  },
  components: {

  }
}
</script>

movie文件夹中 one.vue的内容

<template>
  <div>
    <h2>这是第一个电影详情</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {

  },
  components: {

  }
}
</script>

3.处理SSR跨域请求

1.安装
npm i @nuxtjs/proxy -D

配置

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://example.com',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  }

2.list.vue文件中的代码

<template>
  <div>
    <nuxt-link to="/movie">电影</nuxt-link>
    <hr>
    <ul v-for="(item,index) in movieData"
        :key="index">
      <li>序号:{{item.id}}</li>
      <li>名称:{{item.movieName}}</li>
    </ul>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  async asyncData ({ req, res }) {
    console.log('process.server', process.server);
    var url = process.server ? 'http://localhost:3001/admin/v1/movie/list' : '/admin/v1/movie/list'
    return Axios.get(url).then(response => {
      console.log(response);
      // response = JSON.parse(JSON.stringify(response))
      return { movieData: response.data.result }
    }).catch(error => { console.log(error); })
  },
  data () {
    return {

    }
  },
  methods: {

  },
  components: {

  }
}
</script>