创建 Vue Web 应用设计器项目

最后更新时间：2024 年 08 月

在 SnapDevelop IDE 中，您可以通过可视化设计器快速创建一个 Vue 前端 Web 应用程序。

前提条件

安装组件

SnapDevelop 安装程序将自动安装 Vue Web 应用程序设计器项目所需的组件和环境。

配置网络环境

请确保当前机器可以连接互联网，以便可以成功从 NuGet 源站点下载软件包。

如果是通过代理连接互联网的话，请首先确认代理正常工作，而且例外列表中没有排除掉 NPM 源相关的站点。然后通过 NPM 命令设置代理 IP 和端口，例如：npm config set proxy=“http://[ProxyIP]:[Port]/”。

如果网络连接正常，但 SnapDevelop 仍然提示网络连接错误，请重新启动 SnapDevelop IDE 后再尝试一次。

检查 Node.js 版本

在 SnapDevelop 中创建 Vue 项目时要求使用 Node.js v20.11.1。

SnapDevelop 安装程序默认安装的 Node.js 版本为 v20.11.1。

但是如果您在机器上重新安装或升级了 Node.js 版本，您可以在终端窗口中输入命令： node -v 查看 Node.js 当前版本。

项目类型和工作项

SnapDevelop 提供可视化设计器，供您快速创建 EF Core 实体、枚举、查询模型、以及 Web 视图。

支持可视化设计器的项目类型包括 C# Web API、C# Library，以及 Vue Web 应用程序，这些项目也因此被称为“设计器项目“。使用这些设计器项目，您可以自动生成包含控制器、服务和 C# 模型的标准 .NET 项目以及 Vue.js Web 应用程序。可以在任何 .NET 开发环境（例如 Visual Studio）中打开和维护自动生成的 .NET 项目。

接下来本小节将主要描述 Vue Web 应用程序 设计器项目（如想了解 Web API 设计器项目的更多信息，请参考创建 Web API 设计器项目）。

当您想要在 SnapDevelop 中创建 Vue Web 应用程序设计器项目时，您可以在 IDE 中选择菜单文件 > 新建 > 新建项目，在 新建项目 窗口的 设计器开发 选项卡中选择以下项目类型：

Vue Web 应用程序（含示例）：创建一个可以生成前端 Vue Web 应用程序以及后端 Web API 的设计项目，该项目将自动包含一个示例，方便用户查看运行效果。
Vue Web 应用程序（无示例）：从零开始创建一个可以生成前端 Vue Web 应用程序以及后端 Web API 的设计项目。

在 IDE 中选择菜单项目 > 新建项。在 设计器开发 选项卡中，您可以选择在可视化设计器中创建以下工作项：

实体设计（从零开始）：创建一个空白实体元数据文件。
实体设计（基于数据库）：通过从现有数据库导入数据库架构来创建实体元数据文件。
基类实体设计：创建一个可以被其他实体继承的基础实体。
从属实体设计：创建一个空白从属实体元数据文件。
枚举设计：创建枚举器元数据文件。
复合查询设计：创建基于多实体数据源的查询模型。
视图设计（基于模板）：根据实体或查询模型以及页面模板创建一个 Vue 视图设计文件。
视图设计（从零开始）：创建一个空白 Vue 视图设计文件。您可以自由关联实体或查询模型，添加页面组件，并设计布局。
示例图表设计：创建一个用于展示图表的 Vue 视图设计文件。

下面的小节将重点介绍 视图设计 和 示例图表设计。其他设计器在创建 Web API 设计器项目文档中已有详细说明。

视图设计器

Vue Web 应用设计器项目支持以下视图页面和模板：

主页（Home.sdv）：该页面自动生成，作为应用的主页。每个项目只能有一个 Home.sdv 文件。
布局（Layout.sdv）：该页面自动生成，用于设计应用的布局，例如页面层级和导航。每个项目只能有一个 Layout.sdv 文件。
详情页面：该模板用于显示一条数据。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择一个模型或实体，然后选择 详情页面。）
表单页面：该模板用于增加或修改一条或多条数据。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 表单页面）。
表格页面：该模板用于显示多条数据。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 表格页面）。
树表格页面：该模板以树状结构展示多个表格，每个表格显示多条数据。您可以基于该模板以及实体/查询模型快速创建一个或多个页面（方法同上，最后一步选择 树表格页面）。
示例图表页面：该模板以图表方式展示数据。您可以基于该模板以及实体/查询模型快速创建一个或多个图表视图（右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 示例图表设计，然后点击创建。）

不同的视图页面和模板提供了不同的配置选项。您可以打开每个视图页面，通过大纲树查看层级和选择组件，或者直接在中间的 UI 设计器中选中组件，然后在右边的属性、规则、事件和样式页面中查看和设置相关选项。

主页（Home.sdv）

Home.sdv 主页文件在 Vue Web 项目生成时自动生成。

在左边的 物料库 中，您可以选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

在左边的 大纲树 中，您可以查看页面组件之间的层级关系以及选择要配置的组件，也可以直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

布局（Layout.sdv）

Layout.sdv 布局文件在 Vue Web 项目生成时自动生成。

在左边的 大纲树 中，您可以查看页面组件之间的层级关系以及选择要配置的组件，也可以直接在中间的 UI 设计器中选择想要配置的组件，然后在右边的属性、规则、样式等页面中进行配置。

当前布局页面只支持菜单布局和菜单项，不支持添加其他布局或组件。菜单项（以及子菜单项）在右边的属性页面中进行添加、删除、和修改。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

表单页面

如想从表单页面模板快速创建一个页面，可以右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择一个模型或实体，然后选择 表单页面。当所选择的模型或实体中有 Add 或 Update API 时，该模板处于可选择状态。

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

您也可以在左边的 大纲树 中，查看页面组件之间的层级关系以及选择要配置的组件，或者直接在中间的 UI 设计器中选择想要配置的组件，然后在右边进行配置。

如下图所示，您可以在中间的 UI 设计器中点击 温度（摄氏度） 这个数字输入框，然后在右边配置该输入框。您可以在属性页面中配置该输入框的常规配置，例如：绑定的数据、初始值、值范围、外观、状态等，还可以在规则页面中配置简单的校验规则，例如：是否必填、校验表达式、长度范围、值范围等等。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

表格页面

如想从表格页面模板快速创建一个页面，可以右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择一个模型或实体，然后选择 表格页面。当所选择的模型或实体中有 GetList 或 GetPage API 时，该模板处于可选择状态。

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

如下图所示，您可以在 大纲树 中点击表格这个组件，然后在属性页面中配置该组件的常规配置，例如：加载数据的请求和参数、查询字段、表单布局、数据列等，在规则页面中可以配置简单的校验规则，例如：是否必填、校验表达式、值范围等等，在事件页面配置操作类型，以及在样式页面设置边距。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

树表格页面

如想从树表格页面模板快速创建一个页面，可以右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择一个模型或实体，然后选择 树表格页面。当所选择的模型或实体中有 GetList 或 GetPage API 时，该模板处于可选择状态。

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

详情页面

如想从详情页面模板快速创建一个页面，可以右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 视图设计（基于模板），点击 下一步，选择一个模型或实体，然后选择 详情页面。当所选择的模型或实体中有 Get API 时，该模板处于可选择状态。

您可以在左边的 物料库 中，选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

如下图所示，您可以在 大纲树 中点击页面，然后在属性页面中配置该页面的常规配置，例如：页面参数，在规则页面中可以配置简单的校验规则，在事件页面配置页面加载请求，以及在样式页面设置边距。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

示例图表页面

如想从示例图表页面模板快速创建一个页面，可以右键点击项目节点，然后选择添加 > 新建项。在 设计器开发 选项卡中，选择 示例图表设计，然后点击创建。

您可以在左边的 物料库 中的 基础组件 或 图表组件 标签页中选择想要的组件并拖拽到中间的 UI 设计器中，然后在右边的属性、规则、事件、样式等页面中进行配置。

修改配置后，您可以即时在中间查看页面最新效果。或者点击 预览模式 查看页面在浏览器中运行的效果。

项目生成器

要从设计器项目中生成项目，请选择工具栏的 生成项目：Profile，或右键单击项目节点，然后选择 生成项目 > Profile。

您可以使用默认配置文件（Profile），或创建新配置文件（通过选择 新建配置）。一个设计器项目可以创建多个配置文件，每个包含不同的配置，用于生成不同的代码。

配置文件将存储在设计器项目中的 生成配置 文件夹中，您可以双击配置文件来查看或修改配置文件设置。

在生成配置向导中，完成配置后，您可以单击 代码预览 按钮预览生成的代码，或者单击 生成项目 按钮生成项目。

配置文件

通用配置

覆盖文件：覆盖具有相同文件名的现有代码文件。

实体配置

将架构名称添加为实体名称的前缀：架构的名称将添加为实体文件名的前缀。例如，dbo_cur_emp.sde 包含架构前缀 “dbo_”，而 cur_emp.sde 不包含架构前缀。

为每个架构创建存储实体文件的子文件夹：使用架构名称创建一个文件夹，并将实体文件存储在此文件夹中。

目标配置

您可以指定项目（以及每个项目中的项）的生成位置，以及项目将使用哪个命名空间（可以设置为保持命名空间与目录结构同步）。

您可以修改项目和项的相对输出路径。

对于 Dal 项目（数据访问层），还可以指定 ORM（目前仅支持 EFCore）。

如果当前项目有引用的项目，还可以选择是否单独配置引用的项目。

连接配置

对于每个应用程序数据库，您必须在此处配置数据库连接。

默认情况下，将在 WebApi 项目的根文件夹下创建 SQLite 数据库 (data.db)。您可以选择其他现有数据库连接或选择 添加连接... 来创建新的数据库连接。有关更多信息，请参阅选择数据库连接。

身份数据库配置

在项目属性页面的安全选项卡中启用授权和身份验证后，此设置将可用。

您必须配置数据库连接来存储凭据数据。

默认情况下，将在 WebApi 项目的根文件夹下创建 SQLite 数据库 (identity.db)。您可以选择其他现有数据库连接或选择 添加连接... 来创建新的数据库连接。

生成项目

配置完成后，您可以点击配置窗口右上角的 代码预览 来预览将要生成的代码；然后单击旁边的 生成项目 以生成 C# 项目。

项目生成成功后，以下项目会自动添加到当前解决方案中。

[project].Common：被合约层或认证服务层引用或依赖的开发工具包和扩展功能。
[project].Contracts：定义服务合约的合约层。
[project].Controllers：定义服务控制器的控制器层。
[project].Dal：数据访问层，例如 EF Core，其中包含与数据库相关的配置（存储库、工作单元、DbContext）和数据初始化（值比较器、值转换器）。
[project].Services：实现合约的服务层。
[project].Vue：实现应用的前端展示。
[project].WebApi：向用户发送数据的表示层。
[project].Identity：认证服务层，内部授权用户注册和登录。只有启用授权后才会生成该项目。

开发教程

快速入门

如您想从零开始快速创建一个 Vue Web 应用程序，请参考创建天气预报系统（快速入门）。

运行应用示例

我们将直接运行一个包含 WeatherForecast 示例的 Vue Web 应用程序设计器项目，以展示 Vue Web 应用程序的运行效果。

在此演示中，我们将选择 Vue Web 应用程序（含示例） 项目类型。此项目类型包含了一个应用示例，我们可以将其直接生成 Web API 后端及 Vue 前端应用程序。

该示例项目默认包含一个实体、两个枚举、三个查询模型、以及六个视图（分别用于添加/获取/编辑、主页、以及布局）。您可以直接生成并运行项目，无需做任何修改。

步骤 1：创建一个包含示例的 Vue Web 应用程序设计器项目。

从文件 > 新建 > 新建项目，选择 设计器开发 选项卡；然后选择 Vue Web 应用程序（含示例） 并单击 下一步。

保持默认设置，然后单击创建。

项目显示在解决方案资源管理器中。该示例项目包含以下文件：

一个实体设计文件：WeatherForecast.sde 具有基本配置。
两个枚举文件：TemperaturesState.sdn 和 WeatherState.sdn
三个查询模型文件：CityTemperatureStatics.sdq（城市温度统计，统计每个城市的温度状况）、TemperatureStatics.sdq （温度数据的汇总设计，不添加分组）和 WeatherCities.sdq（查询天气预报的城市列表）
六个视图文件：Create.sdv（添加数据）、Detail.sdv（显示一条数据的明细）、Edit.sdv（编辑数据）、List.sdv（显示多条数据的明细）、Home.sdv（应用的主页）、Layout.sdv（应用的布局）。
logo.svg：应用的logo，将会显示在应用首页的左上角。用户可以使用自己的logo替换该文件。
两个内置的数据库连接：data.db（应用数据）、identity.db（身份校验数据）。
一个默认的生成配置文件：Profile。

步骤 2（可选）：双击实体设计文件、枚举文件、或查询模型文件在设计器中修改相关设置。

步骤 3（可选）：双击视图文件在视图设计器中修改视图设置。

步骤 4：从设计项目生成项目。

单击 IDE 工具栏上的 生成项目 按钮，或右键单击项目节点，然后选择 生成项目 > Profile；或者在 Profile 窗口的右上角单击 生成项目 按钮。

根据设计项目将生成以下项目：

[project].Common：被合约层或认证服务层引用或依赖的开发工具包和扩展功能。
[project].Contracts：定义服务合约的合约层。
[project].Controllers：定义服务控制器的控制器层。
[project].Dal：数据访问层，例如 EF Core，其中包含与数据库相关的配置（存储库、工作单元、DbContext）和数据初始化（值比较器、值转换器）。
[project].Services：实现合约的服务层。
[project].Vue：实现应用的前端展示。
[project].WebApi：向用户发送数据的表示层。
[project].Identity：认证服务层，内部授权用户注册和登录。只有启用授权后才会生成该项目。

步骤 5：运行项目。

1）首先运行 [project].WebApi 项目以启动 Web API。

当 Web API 成功运行后，您将看到以下界面。

2）选择 [project].Vue 项目以启动 Vue Web 应用程序。

新建视图设计文件

第 1 步：右键点击项目节点，选择添加 > 新建项。

第 2 步：在 添加新项 窗口中选择 视图设计（基于模板）。然后点击 下一步。

第 3 步：从 模型/实体 列表中选择一个已创建的模型或实体。如想了解如何创建模型或实体，请参考操作指南。

第 4 步：然后从 视图模板 中选择一个模板：

表格页面：该模板用于显示多条数据。当所选择的模型或实体中有 GetList 或 GetPage API 时，该模板处于可选择状态。
树表格页面：该模板以树状结构展示多个表格，每个表格显示多条数据。当所选择的模型或实体中有 GetList 或 GetPage API 时，该模板处于可选择状态。
表单页面：该模板用于增加或修改一条或多条数据。当所选择的模型或实体中有 Add 或 Update API 时，该模板处于可选择状态。
详情页面：该模板用于显示一条数据。当所选择的模型或实体中有 Get API 时，该模板处于可选择状态。

第 5 步：点击创建。