Skip to content

winjs-dev/winjs-plugin-element-ui

Repository files navigation

winjs-plugin-element-ui

适配 WinJS 的 Element UI 插件,为 Vue 2 项目提供 Element UI 组件库的自动导入和配置支持。

npm version license downloads

功能特性

  • 🚀 自动导入: 支持 Element UI 组件的按需自动导入
  • 📦 零配置: 开箱即用,无需手动配置组件导入
  • 🔧 集成性: 与 WinJS 框架深度集成
  • 🎯 Vue 2 兼容: 专为 Vue 2 项目设计

安装

npm install @winner-fed/plugin-element-ui element-ui
# 或者
yarn add @winner-fed/plugin-element-ui element-ui
# 或者
pnpm add @winner-fed/plugin-element-ui element-ui

快速开始

1. 在 .winrc.ts 中配置插件

import { defineConfig } from 'win';

export default defineConfig({
  plugins: [
    require.resolve('@winner-fed/plugin-element-ui')
  ],
  elementUI: {
    // 插件配置选项(可选)
  }
});

2. 在 Vue 组件中使用

插件会自动处理 Element UI 组件的导入,你可以直接在模板中使用:

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-date-picker
      v-model="date"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      date: ''
    }
  }
}
</script>

配置选项

elementUI

类型:object

Element UI 相关配置,目前支持的配置项:

export default defineConfig({
  elementUI: {
    // 未来可能会添加更多配置选项
  }
});

工作原理

本插件通过以下方式实现 Element UI 的集成:

  1. 自动检测依赖: 插件会自动检测项目中是否安装了 element-ui
  2. 配置解析器: 使用 unplugin-vue-componentsElementUiResolver 来处理组件的自动导入
  3. 版本信息: 自动读取 Element UI 的版本信息并注入到应用数据中
  4. 按需导入: 只导入实际使用的组件,减少打包体积

依赖要求

  • Vue 2.x
  • Element UI 2.15.13+
  • WinJS 框架

示例代码

<!-- src/pages/index.vue -->
<template>
  <div>
    <h2>Welcome to WinJS + Element UI!</h2>
    <el-button type="primary">我是 Element UI 的按钮</el-button>
    <el-input v-model="message" placeholder="输入一些内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

常见问题

Q: 插件无法找到 Element UI 包?

A: 确保已经安装了 element-ui 依赖:

npm install element-ui

Q: 组件样式没有生效?

A: Element UI 的样式需要单独引入,可以在入口文件中添加:

// 在 main.js 或入口文件中
import 'element-ui/lib/theme-chalk/index.css'

Q: 如何使用 Element UI 的按需导入?

A: 插件已经自动配置了按需导入,你只需要在模板中使用组件即可,无需手动导入。

许可证

MIT.

About

A WinJS plugin for Element UI to automatically import components and use tree-shaking to reduce the size of the bundle.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published