vue2-feidou-oa

feidou-oa

这是一个基于 Vue 2 和 Element UI 的组件库，提供了常用的业务组件。

安装

npm install feidou-oa

使用

完整引入

import Vue from 'vue';
import { OaComponent } from 'feidou-oa';
import 'feidou-oa/dist/feidou-oa.css'; // 引入组件库样式

Vue.use(OaComponent);

按需引入

如果您只需要使用部分组件，可以按需引入：

import { OaComponent } from 'feidou-oa';
import 'feidou-oa/dist/feidou-oa.css'; // 引入组件库样式

Vue.component(OaComponent.name, OaComponent);

在 Vue 2 + Webpack 项目中的使用

如果您的项目使用 Vue 2 + Webpack 构建，可能需要额外配置 babel 来确保兼容性：

1. 安装 babel 依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

2. 配置 babel (babel.config.js)：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
        },
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ],
  plugins: [
    // 转换 nullish-coalescing 操作符 (??)
    '@babel/plugin-proposal-nullish-coalescing-operator',
    // 转换 optional-chaining 操作符 (?.)
    '@babel/plugin-proposal-optional-chaining'
  ]
};

3. 在 webpack 配置中确保 babel-loader 处理相关文件。

注意事项

由于我们的组件库使用了 Element UI 组件，因此您需要在项目中安装 Element UI：

npm install element-ui

并且需要在项目入口处引入 Element UI 的样式文件。

组件列表

• MyButton: 按钮组件
• MyComponent: 示例组件

开发

本地开发

# 启动开发服务器
npm run dev

# 构建组件库
npm run build-lib

发布组件库

# 登录 NPM
npm login

# 更新版本号
npm version patch

# 构建
npm run build-lib

# 发布
npm publish

技术栈

• Vue 2
• Element UI
• Vite 作为构建工具
• JavaScript (ES6+)
• CSS

License

MIT