Flask+Vue+ElementUI通用后台管理系统

创建一个使用Flask、Vue、ElementUI的通用后台管理系统的简单框架可以参考以下步骤：

1. 安装Flask和Vue CLI。
2. 创建Flask项目和Vue项目。
3. 引入ElementUI到Vue项目中。
4. 配置Flask以服务Vue前端文件。
5. 设计后台管理的路由和视图函数。

以下是一个非常简单的示例：

1. 安装Flask和Vue CLI。

pip install Flask
npm install -g @vue/cli

2. 创建Flask项目和Vue项目。

export FLASK_APP=myproject.py
flask create myproject
cd myproject
vue create myvueapp

3. 引入ElementUI到Vue项目中。

cd myvueapp
vue add element

4. 配置Flask以服务Vue前端文件。

   在myproject.py中：

from flask import Flask, send_from_directory
app = Flask(__name__, static_folder='../myvueapp/dist/static', template_folder='../myvueapp/dist')
 
@app.route('/')
def index():
    return app.send_static_file('index.html')
 
if __name__ == '__main__':
    app.run(debug=True)

5. 设计后台管理的路由和视图函数。

   在myproject.py中：

from flask import Flask, render_template
app = Flask(__name__)
 
@app.route('/admin')
def admin():
    return render_template('admin.html')
 
if __name__ == '__main__':
    app.run(debug=True)

在myvueapp/src/components/admin.vue中：

<template>
  <div>
    <el-button @click="handleClick">Click Me</el-button>
  </div>
</template>
 
<script>
export default {
  name: 'Admin',
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

在myvueapp/src/router/index.js中：

import Vue from 'vue'
import Router from 'vue-router'
import Admin from '@/components/Admin'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin
    }
  ]
})

在myvueapp/src/App.vue中：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

然后，在Vue项目根目录运行：

npm run serve

在Flask项目根目录运行：

flask run

这样，你就有了一个使用Flask、Vue和ElementUI的通用后台管理系统的基本框架。在实际开发中，你需要根据具体需求设计数据库模型、视图函数和前端组件。