东莞网站公司推广技巧,大连高新园区在哪,做外贸的网站需要什么,活动推广Element-plus 前端函数配置化编程
介绍
yc-setting-elment-plus 是一款针对了 element-plus 框架进行实现的配置化项目开发插件。其主要是基于 yc-config-create-setting 进行实现的#xff0c;并且也对 typescript 进行了处理#xff0c;它能够有效的对 element-plus 所有…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.SlotInfotypeof 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戴向天
QQ809002582
Date: 2023-12-26
