一.项目目录结构

    使用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. 07 Maven 使用Nexus创建私服

    7. Maven 使用Nexus创建私服 私服不是 Maven 的核心概念,它仅仅是一种衍生出来的特殊的 Maven 仓库.通过建立自己的私服,就可以降低中央仓库负荷.节省外网带宽.加速 Maven ...

  2. linq group by / distinct

    https://www.cnblogs.com/qixu/p/6033532.html http://www.cnblogs.com/A_ming/archive/2013/05/24/3097062 ...

  3. 分组取前N记录

    分组取前N记录   经常看到问题,如何取出每组的前N条记录.方便大家参考于是便把常见的几种解法列出于下. 问题:有表 如下,要求取出各班前两名(允许并列第二)Table1+----+------+-- ...

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

  5. k8s的port、targetport、nodeport之间的区别

    先看举例: k8s集群中跑着一个tomcat服务,tomcat容器expose的端口为8080 apiVersion: v1 kind: Service metadata: name: tomcat- ...

  6. CentOS yum 源的配置与使用(引用)

    http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html

  7. derective示例

    1.指令的定义 .directive('haproxySetting', [ function () { return { restrict: 'AEC', scope: { haproxy: '=' ...

  8. 用Node完成AWS S3的Upload流程之全世界最简版

    开场: 查了两天文档,Error了38次,最后索性去掉所有附加条件, 连界面也不要了,在命令行里跑通了一坨最干瘪的Upload流程! 还冒着热气…… 在此先做记录,明天可以搭配美美的界面继续调试了. ...

  9. shell中的重定向(输入输出)

    注意:不同版本的Linux会有所区别,不过大同小异 Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设 ...

  10. Java内存模型以及Volatile、Synchronize关键字的疑问

    1.众所周知,java的内存模型是一个主内存,每个线程都有一个工作内存空间,那么主内存同步到工作内存是什么时候发生的呢?工作内存同步会主内存又是什么时候发生的呢? 在cpu进行线程切换时就会发生这些同 ...