Flask是一個Python輕量級的web應用框架，可以用來構建web應用，而Vue則是一個漸進式JavaScript框架，可以用來構建用戶界面。這篇文章將介紹如何使用Vue和Flask來構建一個電商網站。

在開始項目之前，需要安裝好Vue和Flask的開發環境。本項目將使用Vue2.x和Flask1.x版本。在安裝完畢后，可以開始編寫代碼。

后端代碼

from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/api/products')
def get_products():
products = ['product1', 'product2', 'product3']
return jsonify(products)

這是Flask的一個簡單例子，通過/api/products接口獲取產品列表。實際項目中，可以使用數據庫來存儲和檢索產品信息。

前端代碼

<template>
<div>
<h1>Products</h1>
<ul>
<li v-for="product in products" :key="product">{{ product }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
products: []
}
},
created() {
this.fetchProducts()
},
methods: {
fetchProducts() {
axios.get('/api/products').then(response =>{
this.products = response.data
})
}
}
}
</script>

這是Vue的一個簡單例子，通過axios獲取產品列表并在網站上展示。實際項目中，可以增加搜索和過濾器等功能。

前后端聯合

現在可以將Flask和Vue集成起來了。需要在Flask中設置靜態文件夾，使Vue能夠訪問。

from flask import Flask, jsonify, request, render_template
app = Flask(__name__, static_folder="./dist", template_folder="./dist")
@app.route('/api/products')
def get_products():
products = ['product1', 'product2', 'product3']
return jsonify(products)
@app.route('/')
def index():
return render_template('index.html')

這個例子中，將靜態文件夾設置成"./dist"，并將模板文件夾也設置成"./dist"。這可以使Flask在請求"/"時返回Vue的html文件。

打包

最后一步是將Vue打包成靜態文件，使其可以在Flask中訪問。可以使用Vue的CLI工具進行打包。

$ npm install -g @vue/cli-service-global
$ npm run build

這將生成一個"./dist"文件夾，里面包含了打包后的Vue程序。

結論

使用Vue和Flask可以快速地構建一個電商網站。Vue提供了良好的用戶界面和體驗，Flask提供了Python的強大和靈活性。通過這篇文章的例子，可能會啟發靈感，讓您能夠使用Vue和Flask開發出更加復雜的電商網站。