nuxtjs： https://zh.nuxtjs.org/
SSR：server side render
1、使用模板新建项目
vue init nuxt-community/starter-template <project-name>
cnpm install
npm run dev
2、配置axios
https://github.com/nuxt-community/axios-module
cnpm install @nuxtjs/axios
nuxt.config.js
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
// proxyHeaders: false
}
}
3、开发页面
新建页面, 会自动生成路由
pages/demo.vue
<template>
<h1>{{message}}: {{name}}</h1>
</template>
<script>
export default {
data() {
return {
message: "hello"
};
},
// 向后端请求数据
async asyncData({app, params, query}) {
/**
参数
ctx.app; // 根实例
ctx.route; // 路由实例
ctx.params; //路由参数
ctx.query; // 路由问号后面的参数
ctx.error; // 错误处理方法
*/
let url = "http://127.0.0.1:5000/";
const res = await app.$axios.$post(url, query);
console.log(res);
return res.data;
},
// 配置SEO页面元数据
head: {
title: "关于我们",
meta: [
{ hid: "keywords", name: "keywords", content: "关键字" },
{ hid: "description", name: "description", content: "页面描述" }
]
}
};
</script>
4、后端服务
使用Flask搭建简单后台服务，提供数据
# -*- coding: utf-8 -*-
from flask import Flask, jsonify, request
app = Flask(__name__)
# 服务端接收post的json数据，并返回给客户端
@app.route("/", methods=["POST"])
def index():
data = {
"msg": "ok",
"code": 0,
"data": request.json
}
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
5、访问页面
http://localhost:3000/demo/?name=Tom
查看页面源码，已经包含正确的内容
打包
# 打包
npm run build
# 本地跑
npm start
部署参考文章：
nuxt.js部署vue应用到服务端过程
