MAC+PyCharm+Flask+Vue.js搭建系统

“MAC+PyCharm+Flask+Vue.js搭建系统”的完整攻略如下：

1. 安装所需软件

在使用MAC操作系统的情况下，需要安装以下软件：
- Xcode Command Line Tools
- Homebrew
- Python3
- PyCharm
- Node.js

安装过程可以参考以下步骤：
- 安装Xcode：在App Store中下载安装Xcode，然后在终端中输入xcode-select --install安装Command Line Tools
- 安装Homebrew：在终端中输入/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"安装Homebrew
- 安装Python3：在终端中输入brew install python3安装Python3
- 安装PyCharm：在官网下载PyCharm的Community版，然后进行安装
- 安装Node.js：在终端中输入brew install node安装Node.js

2. 创建Flask项目

在PyCharm中创建一个新的Python项目，并选择Flask作为项目类型。按照提示，创建Flask的虚拟环境以及安装Flask依赖库。

3. 创建Vue.js项目

在终端中进入Flask项目的文件夹，然后使用Vue CLI创建一个新的Vue.js项目。输入以下命令：

vue create frontend

根据提示选择需要的配置，Vue.js项目将被创建在frontend文件夹内。

4. 构建Flask API

在Flask项目中创建app.py文件，并编写API。可以参考以下示例代码：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def data():
    data = {'name': 'Test', 'age': 18}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

以上代码定义了一个接收GET请求的API，返回一个名为Test且年龄为18的字典。实际应用中需要根据需求改写。

5. 构建Vue.js程序

在frontend文件夹中，找到/src/App.vue文件，然后进行修改。将原来的内容清空，替换成以下代码：

<template>
  <div id="app">
    <button @click="getData">Get Data</button>
    <p>{{message}}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      message: ''
    }
  },
  methods: {
    getData () {
      axios.get('/api/data')
        .then(response => {
          this.message = response.data.name + ', ' + response.data.age
        })
    }
  }
}
</script>

以上代码定义了一个按钮和一段文字，当点击按钮时，通过axios发送一个GET请求到Flask的API，获得数据后将数据展示到文字上。

6. 运行程序

在终端中分别进入Flask项目和frontend文件夹，运行以下命令：

export FLASK_APP=app.py
flask run

然后在另一个终端中运行以下命令：

cd frontend
npm run serve

运行以上命令后，可以在浏览器中访问http://localhost:8080查看运行结果。

以上是“MAC+PyCharm+Flask+Vue.js搭建系统”的完整攻略，示例代码仅供参考。如果您在使用过程中遇到问题，请及时查找解决方法。