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说明文档对于程序员来说想必 ...
随机推荐
- 07 Maven 使用Nexus创建私服
7. Maven 使用Nexus创建私服 私服不是 Maven 的核心概念,它仅仅是一种衍生出来的特殊的 Maven 仓库.通过建立自己的私服,就可以降低中央仓库负荷.节省外网带宽.加速 Maven ...
- linq group by / distinct
https://www.cnblogs.com/qixu/p/6033532.html http://www.cnblogs.com/A_ming/archive/2013/05/24/3097062 ...
- 分组取前N记录
分组取前N记录 经常看到问题,如何取出每组的前N条记录.方便大家参考于是便把常见的几种解法列出于下. 问题:有表 如下,要求取出各班前两名(允许并列第二)Table1+----+------+-- ...
- Django入门与实践-第13章:表单处理(完结)
http://127.0.0.1:8000/boards/1/ http://127.0.0.1:8000/boards/2/ http://127.0.0.1:8000/boards/3/ http ...
- k8s的port、targetport、nodeport之间的区别
先看举例: k8s集群中跑着一个tomcat服务,tomcat容器expose的端口为8080 apiVersion: v1 kind: Service metadata: name: tomcat- ...
- CentOS yum 源的配置与使用(引用)
http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html
- derective示例
1.指令的定义 .directive('haproxySetting', [ function () { return { restrict: 'AEC', scope: { haproxy: '=' ...
- 用Node完成AWS S3的Upload流程之全世界最简版
开场: 查了两天文档,Error了38次,最后索性去掉所有附加条件, 连界面也不要了,在命令行里跑通了一坨最干瘪的Upload流程! 还冒着热气…… 在此先做记录,明天可以搭配美美的界面继续调试了. ...
- shell中的重定向(输入输出)
注意:不同版本的Linux会有所区别,不过大同小异 Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设 ...
- Java内存模型以及Volatile、Synchronize关键字的疑问
1.众所周知,java的内存模型是一个主内存,每个线程都有一个工作内存空间,那么主内存同步到工作内存是什么时候发生的呢?工作内存同步会主内存又是什么时候发生的呢? 在cpu进行线程切换时就会发生这些同 ...