环境

node版本 10.8.2 npm版本 6.14.12

开发安装

npm install
npm install -g @syman/ark-cli // 脚本命令里会用到相关指令

webpack5 以下版本

npm install @syman/ark-ui-bcl --save

npm install babel-plugin-import --save-dev

在项目中添加 .babelrc 文件 { "plugins": [["import", { "libraryName": "@syman/ark-ui-bcl", "libraryDirectory": "src/components" }]] }

使用方式

import { DropDownSelectFilter } from '@syman/ark-ui-bcl';

运行组件文档

前置准备：安装ark-cli脚手架

npm run preview

webpack5 支持cdn链接引入，配置内容

使用webpack5 及以上版本，如果安装失败请检查node和npm 版本

引入方式

1. 找到自己项目的webpack.config.js 文件

2. 头部添加 ModuleFederationPlugin 引入代码

   const { ModuleFederationPlugin } = require("webpack").container;

3. 在 plugins 中添加改组件库的引用方法

new ModuleFederationPlugin({ name: "自己项目定义的名称", remotes: { // 远程项目的名称 arkui_BCL: "arkui_BCL@https://cdn.jsdelivr.net/npm/@syman/ark-ui-bcl/0.0.1/remoteEntry.js", }, shared: ['vue', '@syman/ark-ui,'axios'] // 公共组件库 })

项目中的使用方法

1. 项目入口文件（main.js或者是index.js）请用个js文件放置好，然后用import ('该文件')

eg:

 webpack.config.js 的入口文件是
 entry: './src/main.js',
 
 1.把main.js 的文件内容剪切到一个新建的js文件中，
 2.在空白的main.js 文件中import ('该js文件')

2.组件的使用方法

引入组件

let BusDropDownSelectFilter = () => import('arkui_BCL/DropDownSelectFilter')

可以自定义修改组件 // 异步引入模块，data.default中修改或者添加自己的逻辑，但是可以修改的使用方法具体已每个组件的文档为主，

BusDropDownSelectFilter().then((data)=>{ return data.default.methods = Object.assig(data.default.methods,'你自己的methods'); })

修改后在挂载到自己对应的实例上

components: { BusDropDownSelectFilter:BusDropDownSelectFilter },

注意

1. 表格用webpack联邦模块导入，渲染时会卡死
2. window.arkui_BCL_in_mobile = true告诉表格现在是移动端环境

ag-grid官方文档(26.1.0)

文档