@wzzehui/roxe-mobile-ui

适用于移动端项目的ui组件库 (目前内部使用)

注意此ui只适用于vue2 vue3不支持由于vue3相较于vu2组件方面api改动较大无法平顺迁移加上目前手上项目已vu2为主故未做适配， 但如一些use组件如loding和toast已经实现后续根据项目情况看是否发一版vue3的 未做ts导入兼容 如果做vue3的一定兼容~~~~~~~~

目前本UI实现了以下

BUTTON, INPUT, SELECT, POPUP, TOAST, LOADING, FORM, FORMITEM, DATE, UPLOAD, CONFIRM, CARD, NAV 共13个组件

组件采用375px的设计图以rem的方式适配 既根元素为37.5px 自己的项目采用 lib-flexible做rem计算 如需了解请移步 https://www.npmjs.com/package/lib-flexible

部分组件效果：

安装

npm install @wzzehui/roxe-mobile-ui --save

使用

1.在min.js中全局导入

import Vue from 'vue'
import roxeUI from '@wzzehui/roxe-mobile-ui';
// 引入css
import '@wzzehui/roxe-mobile-ui/lib/index.css';
Vue.use(roxeUI);

<template>
  <div class="demo">
    <roxe-button>按钮</roxe-button>
  </div>
</template>

全局注册的组件名称详细列表如下

2.单个导入

配置 babel-plugin-import npm run babel-plugin-import --save-dev 安装完成后 在babel配置文件中配置如下

{
  plugins: [
    [
      "import",
      {
        "libraryName": "@wzzehui/roxe-mobile-ui",
        "style": "/",
      }
    ]
  ]
}

import { roxe_button } from '@wzzehui/roxe-mobile-ui';
// 引入css 此css包含全部组件css 不建议此方案
// import '@wzzehui/roxe-mobile-ui/lib/index.css';
// 强烈建议如下方案 我们提供单独的css的文件 css列表会在下列表格中列出
import '@wzzehui/roxe-mobile-ui/lib/roxe_button.css';
<script>
export default {
  components: {
    'roxe-button': roxe_button
  }
}
</script>

<template>
  <div class="demo">
    <roxe-button>按钮</roxe-button>
  </div>
</template>

单个导入组件名称详细列表如下