快速上手

通过本章节你可以了解到 ZebraUI 的安装方法和基本使用方式。

安装

在现有项目中使用 ZebraUI 时，可以通过 npm 进行安装：

npm i @zebra-ui/uniapp

也可以通过 pnpm 进行安装：

# 通过 pnpm 安装
pnpm add @zebra-ui/uniapp

之后，使用uniapp推荐的easycom方式进行引入。

// pages.json
{
  "easycom": {
    "custom": {
      "^z-(.*)": "@zebra-ui/uniapp/components/z-$1/z-$1.vue"
    }
  },
  "pages": [...]
}

zebra-ui已经在uniapp的插件市场发布。

如果使用的IDE为HbuilderX，则可以通过uniapp的插件市场进行项目导入。

uniapp提供了uni_modules引入，使用此方法不需要再单独对组件库进行引入。

zebra-ui的组件依赖于自身的样式文件，所以你需要在APP.vue中引入。

<!-- APP.vue -->
<style lang="scss">
@import './uni_modules/zebra-ui/index';
</style>

通过依赖安装的包也需要引入样式。

<!-- APP.vue -->
<style lang="scss">
@import '@zebra-ui/uniapp/index';
</style>

以下是 ZebraUI 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。