jlwwbo/simple_frontend_using_vue.js

文件结构

• frontend：vue.js脚手架
• dist：静态网页，由脚手架build得到
• app.py：Flask写的简易后端，用以检测前端的正确性

基本运行

• 打开app.py
  • 很可能报错，按照提示安装相关包，直到正常运行
  • 打开localhost:5000

修改前端

• 先安装node.js
• 启动终端，运行run.py
• 再启动一个终端，进入frontend文件夹
• 输入npm install 安装依赖包
• 修改网页。输入npm run dev 运行网页，在8080端口调试
• 修改好后，使用npm run build生成静态网页文件

注意事项

• 在静态的情况下，需要从run.py进入，而不能直接打开index.html。
  • 因为在没有后端的提示下，前端并不知道，应该把前端的信息流发给哪一个端口。
  • 而run.py中确定了static_folder。这样由后端启动前端，并告诉前端返回信息的端口。
• 动态修改网页时，使用8080端口
  • 我们使用了代理，直接请求5000端口。
  • 相当于手动指定前端应该找哪一个端口。参数在config/index.js中设定
  • 5000端口还运行着dist里的静态文件。但他可以给动态前端提供服务
• 调试情况下
  • 前端代码修改后保存，刷新8080网页即更新，不需要重新run dev
  • 后端代码修改后保存，需要重新在终端执行命令，才能更新。