使用模板进行前端开发

概述

create-cms-widgets 脚手架用来创建外部组件开发模板，用于集成进 cms2.0 的组件库中，使用户快速开发组件，以满足需求。

流程

环境

nodejs > 16.0.0
yarn > 1.0.0
git //安装git

快速开始

npm i create-cms-widgets -g

或者

yarn global add create-cms-widgets

使用命令创建一个项目

npx create-cms-widgets

或者

npm init cms-widgets

根据提示创建一个项目

➜  ~ npx create-cms-widgets
? 请输入目录名称 test

等待项目安装完成

➜ cd test

组件开发

进入到组件模板，组件整体目录结构如下:

启动cms服务

新建工程

运行 npm run dev启动服务，访问http://localhost:5173 新键工程》新建页面 进入到组件开发界面。

在组件控件模块中，我们提供了两个示例组件，分别为 Example 和 Example2组件，可以依照这两个组件示例，进行组件开发。

组件目录

 src
    └─ widgets
       └─ Example
          ├─ index.ts
          ├─ Example.vue
          ├─ Example.setting.vue

组件入口文件

打包文件入口 开发好的组件需要有一个 index.ts组件用于对外输出和打包，需保证格式正确，结构如下：

src/widgets/Widget1/index.ts

import Example from './Example.vue'
import ExampleSettings from './Example.settings.vue'

export default {
  is: 'Example',
  name: 'Example',
  category: 'base', //更多分类 请查看models.Widget
  icon: '',
  canvasView: Example,
  settingsView: ExampleSettings,

  onCreate: (node: CanvasNode) => {
    //触发时机：1.页面刷新 2.组件拖到画布中
    //  可以做以下操作：
    //1.自定义数据初始化
    let defaultProps = { text: 'hello world' }
    node.setDefaultProps(defaultProps) // 保存在node.props上
  },
  //禁用公共属性
  styleConfig: {
    // appearanceSetting: false, //禁用外观设置
    // textSetting: false, //禁用文本设置

    lineHeight: false, // 禁用行高设置  css属性
    textAlign: false, // 禁用字体设置  css属性
  },
}

自定义设置组件

设置显示的内容 每一个组件，都支持可自定义配置样式的功能，即 Widget.settings.vue

src/widgets/Widget1/Widget1.setting.vue

<template>
  <div class="example-setting">
    <SettingItem :title="'自定义设置'">
      <div class="form">
        <div class="row">
          <label>标题</label>
          <el-input
            class="cms-el-input-x"
            placeholder="请输入"
            controls-position="right"
            v-model="props.text"
          ></el-input>
        </div>
      </div>
    </SettingItem>
  </div>
</template>

<script setup lang="ts">
import sdk from 'syc-cms'
const $props = defineProps<{
  node: any
  href?: string
  text?: string
}>()
const props = $props.node.props

const SettingItem = sdk.importAsync(
  '@/views/Project/Pages/Editor/Settings/components/SettingItem.vue'
)
</script>

<style lang="scss" scoped>
.example-setting {
  .form {
    > .row {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 10px 0;
      padding: 0;
      border: 0;
      label {
        flex: none;
        font-size: 12px;
        i {
          vertical-align: middle;
        }
      }
    }
  }
}
</style>

视图组件

画布显示的内容

src/widgets/Example/Example.vue

<template>
  <div class="Example">
    <div>
      {{ props.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  editing: boolean
  running: boolean
  node: CanvasNode
  text?: string
}>()

const text = ref('test')
</script>

<style lang="scss" scoped>
.Example {
  width: 300px;
  height: 400px;
  border: 20px solid #f80;
  background-color: #0af;
  border-radius: 10px;
}
</style>

打包组件

开发好的组件可以通过以下命令执行组件打包，支持全量打包和单组件打包

npm run build //全量打包

npm run build Example // 单独打包Example组件

打包好的文件，都在 dist中

使用

将打包结果放置 cms 客户端安装目录下

host / wwwroot / widgets / Example / index.js
Example2 / index.js

最后

打开cms客户端，和开发环境显示一样的组件