Elimen-components

基于vue2.x构建的兼容vue3.x的公共组件库

安装与使用

安装时请确保npm源为公司私有库地址

开发环境

• npm install --force
• vue2.x环境运行命令：npm run dev:2
• vue3.x环境运行命令：npm run dev:3
• npm run build自动构建vue2.x及vue3.x组件库

生产环境

• npm install elimen-components
• vue2.x环境中，全局引入import elimenComponents from 'elimen-components/v2'，再使用Vue.use(elimenComponents)即可；
• vue3.x环境中，全局引入import elimenComponents from 'elimen-components/v3'，再使用app.use(elimenComponents)即可；
• 亦可按需引入，如import { name } from 'elimen-components/v*;
• 按需引入和全局引入，均需要在main.ts/main.js中引入样式import 'elimen-components/css';

注意事项

• 使用命令npm install --force进行安装，否则会因依赖的版本不支持而出错；
• 安装时出现vue-template-compiler版本不符的错误时，请使用命令npm install [email protected] [email protected]，重新安装vue2及vue-template-compiler，统一版本号；
• 安装后报lib文件夹相关的错误，可忽略，运行npm run build命令即可；
• 组件库内vue2.x使用的是element-ui，vue3.x使用的是element-plus，两者不互通不兼容，在编写组件时需注意；
• 组件库内部分依赖不能同时兼容vue2和vue3，需要在vite配置中根据vue环境进行屏蔽；
• 部分依赖库因兼容问题,不往外提供,需在项目中另外安装,如moment;
• 此组件库仅用于vue2.x向vue3.x升级的过渡阶段，升级完成后弃用

架构详解

使用vite进行打包构建，通过vue-demi区分使用的vue版本，

主要依赖

vue-demi

用于兼容vue2和vue3，其使用了NPM钩子postinstall，当用户安装所有包后，脚本将开始检查已安装的Vue版本，并根据Vue版本返回对应的代码。详情请见vueuse/vue-demi
在构建组件时，需要使用其提供的方法进行构建，构建详情请见组件编写示例

element-ui

用于在vue2环境中使用element-ui构建组件，适配从vue2项目中迁移过来的组件

element-plus

用于在vue3环境中使用element-ui构建组件

@rollup/plugin-terser

vite构建插件，用于简化打包文件代码

组件编写示例