框架集成:nuxt + ant-design-vue + less + node + Express + webpack + es6
前言:这是一个基于服务端渲染的基础框架,可在下方Git地址获取源代码
Github: https://github.com/liu-ian/nuxt-ant-design-vue
Nuxt 进阶篇:https://blog.csdn.net/q2235141/article/details/103156683
Nuxt笔记:
1.asyncData 只能在pages组件使用 ,在服务端组件渲染之前被调用,最终与属性Data一起返回数据给组件
import ...
//返回promise
asyncData ({params,error}){
return axios.get(`https://my-api/posts/${params.id}`).then((res) => {
return {data: res.data}
}).catch((e) => {
error({statusCode: 404,message: 'not find'})
})
}
//async,await
async asyncData ({params}){
let {data} = await axios.get(`https://my-api/posts/${params.id}`)
return {data}
}
//使用回调函数
asyncData ({params}, callback){
axios.get(`https://my-api/posts/${params.id}`).then((res) => {
callback(null, {data: res.data})
}).catch((e) => {
callback({statusCode: 404,message: 'Get not find'}) // 自动执行error函数
})
}
2.fetch 只操作store,不返回组件数据
//改变setStars
fetch ({ store, params }) {
return axios.get('http://my-api/stars')
.then((res) => {
store.commit('setStars', res.data)
})
}
3.@nuxt/axios 跨域代理
/**
* 跨域代理
*/
modules: ['@nuxtjs/axios'],
axios: {
proxy: process.env.NODE_ENV === 'development', // 是否使用代理
// prefix: '',
credentials: true
},
proxy: {
'/api/user/image': {
target: (process.env.NODE_ENV === 'development') ? 'http://192.168.91.201' : 'http://192.168.91.203',
changeOrigin: true,
pathRewrite: {'': ''}
}
}
4.vuex会随着浏览器刷新数据丢失,使用localStorage、sessionStorage、cookie
5.nuxt.config.js 引入antd.less 覆盖主题变量
module.exports = {
build:{
extend (config, {isDev, isClient}) {
config.module.rules.push({
test: /\.less$/,
use: [{
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#2EA9DF', // 自定义 ant-design-vue 主题颜色
'link-color': '#2EA9DF',
'border-radius-base': '2px'
},
javascriptEnabled: true
}
}]
})
}}
}
6.加载图片:nuxt默认将assets里面小于1KB的图片转base64,大于1KB的图片手动放在static静态资源目录进行加载(否则报错404)
7.部署所需:.nuxt、api、nuxt.config.js、package.json
8.pm2: pm2 start ./node_modules/nuxt/bin/nuxt.js --name projectName – start