快速上手 ​

安装 ​

pip install 'vuepy-core[all]'

创建一个 Vue.py 应用（可选） ​

该步骤为可选步骤，也可以直接创建 vue 文件并运行（如：%%vuepy_run方式，见下文）。

在本节中，我们将介绍如何在本地搭建 Vue.py 单页应用, 并允许我们使用 Vue.py 的单文件组件 (SFC)。

确保你安装了最新版本的 Vue.py，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 $ 符号)：

$ python -m vuepy create

这一指令将会安装并执行项目脚手架工具。你将会看到一些诸如 项目名称之类的提示：

✔ Project name: … <your-project-name>

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，生成如下目录结构：

• ipywui: Vue.py自带的组件库文件（Vue.py组件文件，方便开发时进行自动补全，仅在开发时依赖）。
• App.vue: 单页应用文件的单文件组件。
• app.py: 单页应用文件的setup文件。
• app.ipynb: 加载单页应用的 Jupyter Notebook 文件。

<your-project-name>
├── App.vue
├── app.py
├── app.ipynb
└── ipywui

运行 Vue.py 应用 ​

命令行运行（终端应用） ​

通过 vuepy run 命令直接从命令行运行 .vue 文件（默认使用 Textual 终端后端）：

vuepy run App.vue

支持以下选项：

也可以按名称运行已注册到 VuepyAppStore 的内置应用（如 playground、keys）：

vuepy run playground    # 启动内置 Playground
vuepy run keys          # 启动按键查看器
vuepy run --help        # 查看所有可用应用名称

Jupyter 中运行（Jupyter 应用） ​

可以在 JupyterLab 中通过运行app.ipynb加载应用，也可以在已有的 notebook 中通过以下方法运行应用：

• import_sfc 函数从文件加载组件，再使用 create_app 创建应用并运行。
• %vuepy_import 魔法方法从文件加载组件，再使用 create_app 创建应用并运行。
• %vuepy_run 直接从文件创建应用并运行。
• %%vuepy_run 从源码字符串创建应用并运行。

from pathlib import Path
from vuepy import create_app, import_sfc

# Jupyter 应用（ipywidgets 后端，默认）根据 App.vue 实际位置修改
App = import_sfc(Path() / 'App.vue')
app = create_app(App)
app.mount()

from pathlib import Path

from vuepy import create_app
from vuepy.utils import magic

App =%vuepy_import {Path() / 'App.vue'}
app = create_app(App)
app.mount()

from vuepy.utils import magic

%vuepy_run app.vue

from vuepy.utils import magic

%%vuepy_run
<template>
<Button description="add"
        button_style="info"
></Button>
</template>

你现在应该已经运行起来了你的第一个 Vue.py 项目！下面是一些补充提示：

• 推荐的 IDE 配置是 Visual Studio Code + Vuepy Plugin。
• 另一个推荐的 IDE 配置是 PyCharm + Vue 插件。如果使用其他编辑器，参考 IDE 支持章节。
• 想要构建终端 TUI 应用？查看 Textual-vuepy 快速上手。

下一步 ​

如果你尚未阅读简介，我们强烈推荐你在移步到后续文档之前返回去阅读一下。