华玥组件库 hy-app 使用教程

温馨提示

node(推荐) >= 16.14.0 sass(推荐) 1.53.0<=sass<=1.78.0

🚀 下载scss(没有的话需要安装)

提示

华玥组件库使用的是scss，所有对于没有使用scss插件的需要安装scss插件

npm

$ npm install -D sass@1.53.0

pnpm

$ pnpm add -D sass@1.53.0

cnpm

$ cnpm install -D sass@1.53.0

yarn

$ yarn add -D sass@1.53.0

🌈下载dayjs(没有的话需要安装)

提示

由于时间选择器使用到dayjs，所有在使用时候需要下载dayjs，否则会报错

npm

$ npm install dayjs

pnpm

$ pnpm add dayjs

cnpm

$ cnpm install dayjs

yarn

$ yarn add dayjs

🌵 安装hy-app

npm

$ npm install hy-app

pnpm

$ pnpm add hy-app

cnpm

$ cnpm install hy-app

yarn

$ yarn install hy-app

配置全局组件自动引入

修改项目根目录下的 ./src/pages.json 文件，添加如下 easycom 配置：

./src/pages.json

{
  "easycom": {
    "custom": {
      "^hy-(.*)": "hy-app/components/hy-$1/hy-$1.vue"
    }
  }
}

🐔 全局导入组件库样式（修改 uni.scss）

华玥组件库的全局样式、主题变量、组件基础样式需统一导入，否则组件会丢失样式效果。

./uni.scss

@use "hy-app/index.scss" as *;

🌳 页面上使用组件

<template>
    <!-- 然后在所需页面直接使用 -->
    <hy-input></hy-input>
</template>