nuxt+js项目创建及部署

在当前目录下创建nuxt项目

asyncData和fetch

asyncData只能在页面组件使用（返回值自动注册为data数据）

传参可通过自定义事件配合props到子组件

async asyncData({$axios}) {
    let a=await $axios({url:"xxx.xxx.xxx"})
    console.log(a.data[0])
    return {info:a.data[0]}
  },

fetch

Fetch 钩子函数是在服务器端组件实例化后调用的，这使得 fetch 函数可以通过 this 来引用组件的实例对象。（既能够通过this来操作本地数据）

服务器跨域问题

npm下载nuxt的插件

npm install axios @nuxtjs/axios @nuxtjs/proxy

在nuxt.config.js修改

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

  axios: {
    proxy: true,
  },
 
  proxy: {
    '/api': {
      target: 'http://xxxx', // 目标服务器ip
      pathRewrite: {
        '^/api': '',  
        changeOrigin: true // 是否跨域
      }
    }

nuxt-link路由

在nuxt中路由可以自动生成，只需提供跳转路径，单独文件夹下面各有个index页面

<NuxtLink :to="{ path: '/Detail', query: { id: item.id} }" target='_blank'>

pm2 start npm --name "my-nuxt-project" -- run start