前端函数配置化编程 - Element-plus

戴向天

已于 2023-12-27 13:45:02 修改

阅读量495

点赞数 9

分类专栏：低代码前端 vue 文章标签：前端 vue.js 戴向天 vue3 ts

于 2023-12-26 17:35:37 首次发布

本文链接：https://blog.csdn.net/weixin_41088946/article/details/135227290

版权

前端同时被 3 个专栏收录

59 篇文章 2 订阅

订阅专栏

vue

33 篇文章 0 订阅

订阅专栏

低代码

1 篇文章 0 订阅

订阅专栏

yc-setting-element-plus

介绍

yc-setting-elment-plus 是一款针对了 element-plus 框架进行实现的配置化项目开发插件。其主要是基于 yc-config-create-setting 进行实现的，并且也对 typescript 进行了处理，它能够有效的对 element-plus 所有组件的 props、events 进行有效的推导。

快速体验

第一步

搭建项目，并安装插件

// 安装脚手架 - 该脚手架只是单纯的让你能够快速的创建 vite + vue + typescript 项目
$ npm install yc-studio-cli -g

// 使用脚手架进行创建项目
$ yc-studio-cli init demo

// 切换目录
$ cd demo

// 开始安装依赖
$ npm install

// 安装 工具 和 UI框架
$ npm install yc-setting-element-plus element-plus

第二步

将 App.vue 文件变更为 App.ts

内容如下

import ElSetting, { IEntity } from "yc-setting-element-plus";
// 创建一个环境信息
const ProSetting = ElSetting();
// data数据
const welcomeUseTxt = "欢迎使用 yc-setting-element-plus";
// 获取对应的工具信息
const { El, Generate, Source } = ProSetting("Test", { welcomeUseTxt });
// 函数式节点
const WelcomeTextNode: IEntity.SlotInfo<typeof Source> = (vm) =>
  vm.welcomeUseTxt;
// 输入框组件节点
const WelcomeInput = El.Input().setModel("welcomeUseTxt");
// 按钮组件节点
const ResetNode = El.Button({ type: "primary" }).setContent("重置内容").click((vm) => (vm.welcomeUseTxt = welcomeUseTxt));
// 生成组件并进行导出组件信息
export default Generate([WelcomeTextNode, WelcomeInput, ResetNode]).Component;

第三步

更改mian.ts文件内容

import { createApp } from "vue";
import App from "./App";
import ElementPlus from "element-plus";
import "./index.css";
import "./assets/scss/index.scss";
import "element-plus/dist/index.css";
const app = createApp(App);

app.use(ElementPlus);

app.mount("#app");