快速上手 #

创建一个扩展插件 #

在本节中，我们将介绍如何创建扩展插件并启动本地服务预览它。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：

pnpm run create:component

pnpm run create:component

它是扩展插件项目工具。你将会看到一些诸如插件信息 和 TypeScript 之类的可选功能提示：

✔ Component name: … <your-component-name>
✔ Component description: … <your-component-description>
✔ Author name: … <your-name>
✔ Select CSS extension language: … scss / sass / less / css / none 
✔ Need typescript? … Yes / No
✔ Use props? … Yes / No
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择默认。在插件被创建后，通过依次执行以下步骤来启动开发服务器：

1. 在 .env 文件配置你的平台登录账号信息

   bash

   # .env
   VITE_USERNAME=username
   VITE_PASSWORD=password
   

   # .env
   VITE_USERNAME=username
   VITE_PASSWORD=password
   

2. 在 index.html 入口配置你的服务地址

   html

   <!-- index.html -->
   <script>
     var CONFIG = {
       API: {
         BASE_URL: 'http://x.x.x.x:x',
       },
     }
   </script>
   

   <!-- index.html -->
   <script>
     var CONFIG = {
       API: {
         BASE_URL: 'http://x.x.x.x:x',
       },
     }
   </script>
   

3. 构建配置

   要在构建平台添加扩展插件，首先打开要调试的表单，并在其中添加自定义控件并将 显示类型 设置为你在第一步创建的插件名称。

4. 打包扩展插件

   将插件打包为 UMD 文件。

   bash

   pnpm run build:extensions
   

   pnpm run build:extensions
   

5. 配置表单信息

   打开 /src/components/set-form/index.vue 并将其改为你配置的表单：

   ts

   onMounted(() => {
     if (root.value) {
       window.CoRenderCtor.of().init(root.value).setForm({
         name: 'extension-playground', // 表单名称
         busi: 0, // 业务编号
       })
     }
   })
   

   onMounted(() => {
     if (root.value) {
       window.CoRenderCtor.of().init(root.value).setForm({
         name: 'extension-playground', // 表单名称
         busi: 0, // 业务编号
       })
     }
   })
   

6. 启动本地开发服务

   bash

   pnpm run serve
   

   pnpm run serve
   

你现在应该已经运行起来了你的第一个扩展插件项目！现在打开 serve 启动的地址，默认在 localhost:5173 就可以看到包含了创建的扩展插件的表单。

关于开发服务与扩展插件的更多内容，请阅读后续指南。