关注我，教你彻底学会trame

Trame 不是单纯的前端框架，而是一个全栈 Web 应用开发框架。它的核心特点是： 

• 用纯 Python 开发：无需编写 HTML/CSS/JavaScript
• 前后端一体化：自动处理前后端通信
• 专注科学可视化：与 VTK/Paraview 深度集成
• 响应式设计：支持实时数据更新和交互

  from trame.app import get_server
  from trame.ui.vuetify import SinglePageLayout
  from trame.widgets import vuetify  # 添加缺失的vuetify导入
  
  # 初始化服务
  server = get_server(client_type='vue2')
  state = server.state
  
  # 构建界面
  with SinglePageLayout(server) as layout:
      layout.title.set_text("我的Trame应用")
  
      with layout.content:
          vuetify.VSlider(
              v_model=("value", 50),
              min=0,
              max=100,
              label="示例滑块"
          )
  
  if __name__ == "__main__":
      server.start()

  以上是一个简单的trame网页示例

 要实现上述的代码

首先要安装相应的包

pip install trame-vuetify
pip install trame

 

确保以下最低版本：

• trame >= 2.0.0
• trame-vuetify >= 2.0.0

 学习官网GitCode - 全球开发者的开源社区,开源代码托管平台GitCode是面向全球开发者的开源社区,包括原创博客,开源代码托管,代码协作,项目管理等。与开发者社区互动,提升您的研发效率和质量。https://gitcode.com/gh_mirrors/tr/trame初学者可以类似地学习其他组件的使用如下

# 基础按钮
vuetify.VBtn("提交", color="primary", click="submit()")

# 带图标按钮
vuetify.VBtn(
    "下载", 
    icon="mdi-download", 
    color="success",
    class="mx-2"
)

# 图标按钮
vuetify.VBtn(icon=True, children=[vuetify.VIcon("mdi-home")])

# 标题文本
vuetify.VCardTitle("地块详细信息", class="text-h5")

# 辅助文本
vuetify.VListItemSubtitle("最后更新：2023-08-20", class="text-caption")

# 文本输入
vuetify.VTextField(
    v_model=("name", ""),
    label="地块名称",
    outlined=True,
    rules="[(v) => !!v || '必填字段']"
)

# 数字输入
vuetify.VTextField(
    v_model=("area", 0),
    label="面积 (m²)",
    type="number",
    suffix="m²"
)

# 下拉选择
vuetify.VSelect(
    v_model=("land_type", "residential"),
    :items="land_types",
    label="用地类型",
    outlined=True
)

关注我，持续更新