直接跳到内容

快速上手

安装

sh
pip install org.vuepy.core

创建一个 Vue.py 应用

前提条件

  • 熟悉命令行
  • 已安装 Vue.py

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

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

Vue.py
sh
$ 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 文件。
tree
sh
<your-project-name>
├── App.vue
├── app.py
├── app.ipynb
└── ipywui

运行 Vue.py 应用

前提条件

  • 已创建 Vue.py 应用
  • 已安装 JupyterLab

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

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

# 根据 App.vue 实际位置修改
App= import_sfc(Path() / 'App.vue')
app = create_app(App)
app.mount()

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

下一步

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

快速上手已经加载完毕