安装

NPM

npm i xm-vue-ui -S

快速上手

说明

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

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

推荐用法：

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

@import '~xm-vue-ui/lib/tree-select/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-ui',
        style: false
      }
    ]
  ]
}

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

import { TreeSelect } from 'xm-vue-ui';

@import '~xm-vue-ui/lib/tree-select/style/index.scss';

方式二. 按需引入组件

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

import TreeSelect  from 'xm-vue-ui/lib/tree-select';

@import '~xm-vue-ui/lib/tree-select/style/index.scss';

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

浏览器支持

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

开发说明

初次使用

初次运行 npm run dev前需进行如下操作：

npm i
npm run build
npm link
npm link xm-vue-ui

原因：项目iconfont文件引用构建版~xm-vue-ui/lib/style/iconfont/iconfont.ttf，因此需要将xm-vue-ui自身添加为npm依赖

开发模式

npm run dev

新建组件

以组件 tree-select 为例：

npm run create:component tree-select

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

{
  path: '/tree-select',
  title: 'TreeSelect - 分类选择'
}

完整结果类似如下：

module.exports = {
  'zh-CN': {
    nav: [
      {
        name: '组件',
        showInMobile: true,
        groups: [
          {
            groupName: '基础组件',
            list: [
              {
                path: '/tree-select',
                title: 'TreeSelect - 分类选择'
              }
            ]
          }
        ]
      }
    ]
  }
};

npm run dev 即可在左侧菜单栏找到 TreeSelect - 分类选择 页面

开发

以组件 tree-select 为例：

-- demo
  -- index.vue  // 范例
-- style
  -- index.scss // 样式主文件
-- TreeSelect.vue  // 组件主文件
-- index.js  // 入口文件
-- zh-cn.md  // 文档

源码位于 TreeSelect.vue，范例位于 demo/index.vue，文档位于 zh-cn.md

发布组件库

npm run release