一.项目目录结构

    使用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看这篇就够了的更多相关文章

  1. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  2. React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  3. [转]React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  4. ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了

    引言 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必是件很痛苦的事情吧,但文档又必须写,而且文档的格式如果没有具体要求的话,最终完成的文档则完全取决于开发者 ...

  5. .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...

  6. 想了解SAW,BAW,FBAR滤波器的原理?看这篇就够了!

    想了解SAW,BAW,FBAR滤波器的原理?看这篇就够了!   很多通信系统发展到某种程度都会有小型化的趋势.一方面小型化可以让系统更加轻便和有效,另一方面,日益发展的IC**技术可以用更低的成本生产 ...

  7. [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了

    [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...

  8. 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 ...

  9. 【转】ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了

    原文链接:https://www.cnblogs.com/yilezhu/p/9241261.html 引言 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必 ...

随机推荐

  1. [转]微信公众平台(测试接口)开发前的准备工作(转载自walkingmanc的专栏)

    本文转自:http://blog.csdn.net/jiangweicpu/article/details/21228949 http://blog.csdn.net/walkingmanc/arti ...

  2. Windows操作系统下SVN无法上传*.o文件

    Windows操作系统下SVN无法上传*.o文件 2017年09月07日 10:14:49 yanlaifan 阅读数:834  摘自:https://blog.csdn.net/yanlaifan/ ...

  3. 7.25 js 自定义方法 a.b

    调用: $(function(){ Starinput.initiate({name:'qr1_z.startlevel',tar: $("#sitelogo1"), stars: ...

  4. lpm_clshift ip仿真

    今天仿真了一下lpm_clshift ip 其中din为输入的信号,sh_out为输出的信号. 以上为IP的设置. 可以看到din 的00000010 对应的step的2,一个时钟后sh_out的输出 ...

  5. modelsim仿真中Altera库的用法

    添加altera 库 实例: 把建立lpm_mux IP时生成的.v文件lpm_mux_ip.v和编写的测试脚本文件放在一起,在modelsim中建立工程,把下面两个文件添加到工程中 直接compil ...

  6. 解决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. ...

  7. (网络流 模板 Dinic) Drainage Ditches --POJ --1273

    链接: http://poj.org/problem?id=1273 代码: //Dinic #include<stdio.h> #include<string.h> #inc ...

  8. github/gitlab添加多个ssh key

    系统:macOS X 由于公司的代码管理放在了gitlab.com上,所以添加了一个ssh key, 生成ssh key的代码如下: 1.$ ssh-keygen -t rsa -C “yourema ...

  9. linux下怎样用c语言调用shell命令

    C程序调用shell脚本共同拥有三种法子 :system().popen().exec系列数call_exec1.c , system() 不用你自己去产生进程.它已经封装了,直接增加自己的命令 ex ...

  10. springmvc 开涛 注解式控制器

    版本 定义处理器类 处理器映射适配器 备注 支持的注解 2.5前 controller       2.5 注解 DefaultAnnotationHandlerMapping AnnotationM ...