安装

NPM

npm i xm-vue-pro -S

快速上手

说明

针对公司产品线众多的现状，所有组件样式文件均不建议引用编译后的css或javascript中import 'xm-vue-pro/style/index.scss'方式引用

建议在scss中集中引用，以方便主题定制

推荐用法：

// 主题定制
$xm-primary-color: #488ff9;

@import '~xm-vue-pro/lib/scene-dialog/style/index.scss';
@import '~xm-vue-pro/lib/scene-custom-dialog/style/index.scss';

方式一. 使用 babel-plugin-import (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

// 在 babel.config.js 或 babel-loader 中添加插件配置
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'xm-vue-pro',
        style: false
      }
    ]
  ]
}

接着你可以在代码中直接引入 XM Vue Pro 组件，插件会自动将代码转化为方式二中的按需引入形式

import { SceneDialog } from 'xm-vue-pro';

@import '~xm-vue-pro/lib/scene-dialog/style/index.scss';

方式二. 按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

import SceneDialog  from 'xm-vue-pro/lib/scene-dialog';

@import '~xm-vue-pro/lib/scene-dialog/style/index.scss';

更多内容请参考 快速上手.

浏览器支持

现代浏览器以及 Android 4.0+, iOS 8+.

开发说明

开发模式

npm run dev

新建组件

以组件 scene-dialog 为例：

npm run create:component scene-dialog

修改文件 docs/src/doc.config.js，合适地方添加如下行：

{
  path: '/scene-dialog',
  title: 'SceneDialog - 场景宣传框'
}

完整结果类似如下：

module.exports = {
  'zh-CN': {
    nav: [
      {
        name: '组件',
        showInMobile: true,
        groups: [
          {
            groupName: '业务组件',
            list: [
              {
                path: '/scene-dialog',
                title: 'SceneDialog - 场景宣传框'
              }
            ]
          }
        ]
      }
    ]
  }
};

npm run dev 即可在左侧菜单栏找到 SceneDialog 场景宣传框 页面

发布单个组件

以组件 scene-dialog 为例：

// 构建
npm run build:component scene-dialog

// 发布（该命令借助lerna自动检测有源码修改的组件，批量发布）
npm run release:components 

发布组件库

npm run release