工具Pycharm、vsCode
1、Flask搭建
pycharm环境安装完成之后，创建app.py
'''
flask+vue
前后端分离项目，后端服务
'''
from flask import Flask, render_template, jsonify
from random import *
from flask_cors import CORS
定义APP
app = Flask(__name__)
#解决跨域问题
CORS(app)
定义路由
@app.route('/', methods=['GET', 'POST'])
def cathc_all():
return 'Hello flask+vue'
启动
if __name__ == '__main__':
app.run(debug=True)
运行app.py文件，
然后浏览器访问http://127.0.0.1:5000/，运行成功结果显示：
2、VUE环境搭建
a、首先 全局安装vue Cli：npm install -g(全局安装)，npm下载的国外的依赖，可以使用淘宝的cnpm。
下载淘宝的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
b、使用npm或cnom下载vue cli
npm insatll -g vue-cli
c、如图所示安装成功
d、创建VUE项目
进入到想要创建项目的目录位置； 执行
vue init webpack client
按照如果所示选择创建：
? Project name client
? Project description A Vue.js project
? Author hubo <1290259791@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recom
mended) npm</1290259791@qq.com>
e、VUE项目创建成功之后，执行：
npm run dev
如图所示执行成功
f、执行成功之后，浏览器访问 http://localhost:80881，如图所示，VUE项目创建成功；
g、新建Ping.vue项目，目录结构如图：
<template>
<div class="container">
<button type="button" class="btn btn-primary">{{ msg }}</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Ping',
data () {
return {
msg: 'tttt'
}
},
methods: {
getMessage () {
const path = 'http://127.0.0.1:5000/'
// eslint-disable-next-line no-undef
axios.get(path)
.then(res => {
this.msg = res.data
}).catch(error => {
console.error(error)
})
}
},
created () {
this.getMessage()
}
}
</script>
h、修改index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Ping from '@/components/Ping'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/ping',
name: 'Ping',
component: Ping
}
],
mode: 'history'
})
i、启动Flaks，启动VUE项目.
浏览器访问 http://localhost:8081/ping 。 如图flask+vue搭建成功
Original: https://blog.csdn.net/aa520liangsheng/article/details/114539504
Author: aa520liangsheng
Title: Flask+vue 小白搭建
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/748950/
转载文章受原作者版权保护。转载请注明原作者出处！