华玥组件库

温馨提示

node(推荐) >= 16.14.0

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

提示

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

npm

$ npm install sass -D

pnpm

$ pnpm add sass -D

cnpm

$ cnpm install sass -D

yarn

$ yarn add sass -D

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

提示

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

npm

$ npm install dayjs

pnpm

$ pnpm add dayjs

cnpm

$ cnpm install dayjs

yarn

$ yarn add dayjs

安装组件

npm

$ npm install hy-app

pnpm

$ pnpm add hy-app

cnpm

$ cnpm install hy-app

yarn

$ yarn install hy-app

按需引入组件

<yk-input></yk-input>

import { ykInput } from 'hy-app'

如何全局引入组件

1. 如果你只想在h5使用，你可以这么引入

温馨提示

这种会增加主包体积，不推荐微信小程序使用

./src/main.ts

import { createSSRApp } from "vue";
import App from "./App.vue";
import { install } from "hy-app";

export function createApp() {
    const app = createSSRApp(App);
    app.use(install);
    return {
        app
    };
}

2. 如果你想按需加载。你可以这个全局定义（推荐）

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

在pages.json文件引入全局组件库

./src/pages.json

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