hc-vue3-ui 是什么？

由于前端项目较多，又没有集成与一体，而组件库基本上都是一致的，但在实际开发中，通常会修改部分组件，导致组件库不能与其他前端项目统一，所以，就有了这个组件库，把多个前端项目通用的组件库封装在一起，方便后续统一维护，也方便使用

注意：此组件库为泓创智诚内部私有组件库，请勿使用在非公司的前端项目中

安装之前

由于此组件库是私有组件库，所以，需要配置私有 npm 仓库，才能安装使用，npm官方上，并不存在此组件库，也请不要上传到npm官方仓库中

请先安装 hcny ，这是一个修改的 npm 源管理器，这是一个私有的工具，内置了私有npm仓库源

全局安装 hcny

npm install -g hcny --registry http://47.110.251.215:9000/

:::tip 如果安装失败，请在 npm 命令前加上权限，如：sudo npm xxxxx :::

设置为私有 npm 仓库

::: code-group

hnrm use hcxxy

hyrm use hcxxy

 hprm use hcxxy

:::

hcny 使用文档，请查看： [http://47.110.251.215:9000/-/web/detail/hcny](http://47.110.251.215:9000/-/web/detail/hcny)

安装组件库

当您完成了上面的步骤后，就可以安装组件库了，任选一种方式安装到项目中即可

::: code-group

npm install hc-vue3-ui --save

yarn add hc-vue3-ui

pnpm install hc-vue3-ui

:::

配置文件

在使用之前，需要先建立一个配置文件，配置项目相关的参数，如：src/config/index.js

export default {
    //以下这些是必须配置的参数
    key: 'measure', // 配置主键,目前用于存储
    clientId: 'measure', // 客户端id
    clientSecret: 'measure_secret', // 客户端密钥
    tokenHeader: 'Blade-Auth',
    tokenKey: 'measure-access-token',
    refreshTokenKey: 'measure-refresh-token',
    //...其它配置
}

全局注册

在 main.js 文件中，全局引入注册即可

import HcVue3UI from 'hc-vue3-ui'
import 'hc-vue3-ui/dist/index.css'

//引入配置文件
import website from '~src/config'

//泓创私有组件库
app.use(HcVue3UI, website)

开发规范建议

请尽量把可复用的元素等操作，进行封装，以便后续维护，但也不建议过度封装。

尽量采用 yarn 作为包管理工具。

多看文档，多看文档，多看文档。

index.md 2.6 KB Permalink History Raw