Flask是一款Python的Web框架,Vue.js是一款前端框架,Vue CLI是Vue.js的官方腳手架工具,那么如何將Flask和Vue.js結(jié)合起來呢?使用Flask作為后端提供API服務(wù),Vue.js作為前端展示頁面,使用Vue CLI進行工程化管理。
首先,我們需要安裝Vue CLI,可以使用npm進行安裝:
npm install -g @vue/cli
然后,在Vue CLI中創(chuàng)建一個新項目:
vue create my-project
接下來,我們需要使用Vue.js的axios模塊來與后端API進行通信,可以使用npm進行安裝:
npm install axios --save
然后,在Vue.js的main.js文件中,引入axios模塊:
import axios from 'axios'; Vue.prototype.$http = axios;
接著,在Vue.js的組件中,可以使用以下代碼來調(diào)用后端API:
this.$http.get('/api/data').then(response =>{ console.log(response.data); });
最后,在Flask的路由中,提供API服務(wù):
@app.route('/api/data') def get_data(): return jsonify({'data': 'Hello world!'})
以上就是在Flask中使用Vue CLI的方法,通過該方法可以輕松地將Flask和Vue.js結(jié)合起來,實現(xiàn)前后端分離的開發(fā)模式。