1. 搭建nuxt项目:参考https://blog.csdn.net/qq_42231156/article/details/90174203。
2. nuxt中使用全局@nuxtjs/axios:参考:https://blog.csdn.net/weixin_30794491/article/details/99910973。
2.1 如果pageage.json中的dependencies没有"@nuxtjs/axios"就下载安装:npm install --save @nuxtjs/axios
2.2 在nuxt.config.js中配置:
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
proxy: true,
prefix: '/api/',
credentials: true
},
proxy: {
'/api/': {
target: 'https://xxx.cn',
pathRewrite: {
'^/api/': '/',
changeOrigin: true
}
}
},
build: {
vendor: ['axios'],
}
}
2.3 在组件中调用:
mounted() {
this.$axios.get("/index").then(res=>{
console.log(res)
})
}
3. nuxt中使用axios:
3.1 下载axios:npm install --save axios
3.2 在需要的页面引入使用:import axios from "axios"
axios.get("user.json").then(res=>{
console.log(res)
})
4. nuxt使用mock:
4.1 下载mock:npm install --save mock
4.2 在plugins/mock.js文件创建:
var Mock = require('mockjs')
Mock.mock(/user\.json/, {
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL'
}]
})
4.3 在nuxt.config.js引入mock插件:
plugins: [
{ src: '~plugins/mock', ssr: true }
]
4.4 在axios请求mock的数据:
axios.get("user.json").then(res=>{
console.log(res)
})