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配合，具體使用之后補充，有任何疑問歡迎討論，不喜勿噴！