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
部署参考文章：
参考
