一.项目目录结构

    使用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. 如何修改路由器的登录IP地址?

    如何修改路由器的登录IP地址? 因为有多个路由器,为了区分不同路由器,我们可以修改它的登录IP,而且修改后,可以在连接的电脑上直观地知道所连接的是哪一台路由器 买回来的路由器,一般默认的登录地址是19 ...

  2. Android中px, ppi, dpi, dp, dip, sp概念解析

    Android中px, ppi, dpi, dp, dip, sp概念解析

  3. 2018.10.12 bzoj4712: 洪水(树链剖分)

    传送门 树链剖分好题. 考虑分开维护重儿子和轻儿子的信息. 令f[i]f[i]f[i]表示iii为根子树的最优值,h[i]h[i]h[i]表示iii重儿子的最优值,g[i]g[i]g[i]表示iii所 ...

  4. js数组合并(一个数组添加到另一个数组里面)方法

    js定义两个数组. var arrA=[1,2,3]; var arrB=[4,5,6]; 要实现[1,2,3,4,5,6],如果直接arrA.push(arrB); 则arrB只会作为了arrA的一 ...

  5. try-catch+thows异常范围说明

    方式一: CatalogPO deleteTarget = null; /** 查询是否存在 **/ deleteTarget = catalogMapper.findByCatalogId(cata ...

  6. 分享一个以前写的基于C#语言操作数据库的小框架

    一:前言 这个是以前写的操作MySQL数据库的小型框架,如果是中小型项目用起来也是很不错的,里面提供Filter.ModelPart.Relationship等机制实现操作数据库时的SQL语句的拼接和 ...

  7. trmd_b1_ok

    # -*- coding:utf-8 -*- ''' 从11c开始提取 ''' import re import numpy as np import os year = '17A' ss=" ...

  8. Java(Android)线程池[转]

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...

  9. HDU1254 推箱子(BFS) 2016-07-24 14:24 86人阅读 评论(0) 收藏

    推箱子 Problem Description 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱子推到指定的位置,注意,搬运工只能推 ...

  10. oracle数据库查询日期sql语句(范例)、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据(一整列)

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...