在当前目录下创建nuxt项目
![](https://img-blog.csdnimg.cn/img_convert/d3a58c333f6e91fbb45e4dfa90bf0335.png)
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