Vue+Flask看这篇就够了
一.项目目录结构
使用Vue+Flask搭建前后端分离的基础平台。
my_project/
app/
//vue目录
static/
models/
remplates/
404.html
index.html
views/
__init__.py
index.py
run.py
settings.py
README.md
my_project为项目根目录,my_project/app为Vue项目文件所在位置,其他文件和文件夹为flask项目的基本目录或者文件,在具体使用中再具体分析。
二.项目搭建过程
1.创建项目文件夹my_project:
mkdir my_project
2.进入目录并创建Vue项目(此处假设你已经熟悉Vue CLI的使用):
cd my_project
vue init webpack app
3.进入app文件夹,修改webpack编译config,目的是修改Vue编译后的文件存储位置:
cd app
- 修改config/index.js下的build对象的如下值:
// 编译生成的页面入口
index: path.resolve(__dirname, '../../templates/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../templates'),
assetsSubDirectory: '../static',
assetsPublicPath: '/',
4.在app目录下运行
npm install
npm run build
5.在更目录下创建最下应用run.py,代码如下:
from flask import Flask, render_template
app=Flask(__name__)
@app.route('/')
def hello_world():
return render_template("index.html")
if__name__=='__main__':
app.run(host="0.0.0.0", port="3000")
6.启动项目:
python run.py
7.在浏览器中键入0.0.0.0:3000即可看到运行效果
至此,基于Vue+Flask的项目搭建完成,前后端分离需要Nginx配合,具体使用之后补充,有任何疑问欢迎讨论,不喜勿喷!
Vue+Flask看这篇就够了的更多相关文章
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- React入门看这篇就够了
摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...
- [转]React入门看这篇就够了
摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...
- ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了
引言 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必是件很痛苦的事情吧,但文档又必须写,而且文档的格式如果没有具体要求的话,最终完成的文档则完全取决于开发者 ...
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...
- 想了解SAW,BAW,FBAR滤波器的原理?看这篇就够了!
想了解SAW,BAW,FBAR滤波器的原理?看这篇就够了! 很多通信系统发展到某种程度都会有小型化的趋势.一方面小型化可以让系统更加轻便和有效,另一方面,日益发展的IC**技术可以用更低的成本生产 ...
- [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...
- ExpandoObject与DynamicObject的使用 RabbitMQ与.net core(一)安装 RabbitMQ与.net core(二)Producer与Exchange ASP.NET Core 2.1 : 十五.图解路由(2.1 or earler) .NET Core中的一个接口多种实现的依赖注入与动态选择看这篇就够了
ExpandoObject与DynamicObject的使用 using ImpromptuInterface; using System; using System.Dynamic; names ...
- 【转】ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了
原文链接:https://www.cnblogs.com/yilezhu/p/9241261.html 引言 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必 ...
随机推荐
- [转]微信公众平台(测试接口)开发前的准备工作(转载自walkingmanc的专栏)
本文转自:http://blog.csdn.net/jiangweicpu/article/details/21228949 http://blog.csdn.net/walkingmanc/arti ...
- Windows操作系统下SVN无法上传*.o文件
Windows操作系统下SVN无法上传*.o文件 2017年09月07日 10:14:49 yanlaifan 阅读数:834 摘自:https://blog.csdn.net/yanlaifan/ ...
- 7.25 js 自定义方法 a.b
调用: $(function(){ Starinput.initiate({name:'qr1_z.startlevel',tar: $("#sitelogo1"), stars: ...
- lpm_clshift ip仿真
今天仿真了一下lpm_clshift ip 其中din为输入的信号,sh_out为输出的信号. 以上为IP的设置. 可以看到din 的00000010 对应的step的2,一个时钟后sh_out的输出 ...
- modelsim仿真中Altera库的用法
添加altera 库 实例: 把建立lpm_mux IP时生成的.v文件lpm_mux_ip.v和编写的测试脚本文件放在一起,在modelsim中建立工程,把下面两个文件添加到工程中 直接compil ...
- 解决Error creating bean with name 'huayuanjingguanDaoimp' defined in file [D:\apache-tomcat-7.0.52\webapps\landscapings\WEB-INF\classes\com\itheima\landscaping\dao\imp\huayuanjingguanDaoimp.class]: Invo
问题描述: 10:23:13,585 ERROR ContextLoader:307 - Context initialization failedorg.springframework.beans. ...
- (网络流 模板 Dinic) Drainage Ditches --POJ --1273
链接: http://poj.org/problem?id=1273 代码: //Dinic #include<stdio.h> #include<string.h> #inc ...
- github/gitlab添加多个ssh key
系统:macOS X 由于公司的代码管理放在了gitlab.com上,所以添加了一个ssh key, 生成ssh key的代码如下: 1.$ ssh-keygen -t rsa -C “yourema ...
- linux下怎样用c语言调用shell命令
C程序调用shell脚本共同拥有三种法子 :system().popen().exec系列数call_exec1.c , system() 不用你自己去产生进程.它已经封装了,直接增加自己的命令 ex ...
- springmvc 开涛 注解式控制器
版本 定义处理器类 处理器映射适配器 备注 支持的注解 2.5前 controller 2.5 注解 DefaultAnnotationHandlerMapping AnnotationM ...