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

// 安装按需引入的插件
$ npm install -D unplugin-vue-components unplugin-auto-import

第二步

初始化vite配置信息

文件路径：vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

第三步

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

import ElSetting, { IEntity } from "yc-setting-element-plus";
// data数据
const welcomeUseTxt = '欢迎使用 yc-setting-element-plus'
// 获取对应的工具信息
const { El, Generate, Source } = ElSetting('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');

第五步

运行项目

$ npm run dev

开发解答

Author：戴向天

QQ：809002582

Date: 2023-12-26