适配 WinJS 的 Element UI 插件,为 Vue 2 项目提供 Element UI 组件库的自动导入和配置支持。
- 🚀 自动导入: 支持 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
import { defineConfig } from 'win';
export default defineConfig({
plugins: [
require.resolve('@winner-fed/plugin-element-ui')
],
elementUI: {
// 插件配置选项(可选)
}
});
插件会自动处理 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>
类型:object
Element UI 相关配置,目前支持的配置项:
export default defineConfig({
elementUI: {
// 未来可能会添加更多配置选项
}
});
本插件通过以下方式实现 Element UI 的集成:
- 自动检测依赖: 插件会自动检测项目中是否安装了
element-ui
包 - 配置解析器: 使用
unplugin-vue-components
的ElementUiResolver
来处理组件的自动导入 - 版本信息: 自动读取 Element UI 的版本信息并注入到应用数据中
- 按需导入: 只导入实际使用的组件,减少打包体积
- 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>
A: 确保已经安装了 element-ui
依赖:
npm install element-ui
A: Element UI 的样式需要单独引入,可以在入口文件中添加:
// 在 main.js 或入口文件中
import 'element-ui/lib/theme-chalk/index.css'
A: 插件已经自动配置了按需导入,你只需要在模板中使用组件即可,无需手动导入。
MIT.