@bytetrade/bytetrade-ui

ByteTrade基于 vue3.x + ts + vue-cli5 开发组件的 npm 包

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

打包到 Lib

npm run lib

登录到 npm

tip : 发布之前需要登录

首先需要到 npm 上注册一个账号，注册过程略。 如果配置了淘宝镜像，先设置回 npm 镜像：

$ npm config set registry http://registry.npmjs.org

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。

//登录
$ npm login

发布到 npm

执行发布命令，发布组件到 npm

//发布
$ npm publish

发布成功

发布成功后稍等几分钟，即可在 npm 官网搜索到。(会发送邮件)

使用新发布的组件库

安装组件库依赖全局注册

在需要使用的 vue 项目中 npm install @bytetrade/bytetrade-ui 添加进来，然后在 main.js 中进行全局注册，如下：

import { createApp } from "vue";
import App from "./App.vue";
import templateUi from "@bytetrade/bytetrade-ui";
const app = createApp(App);
//组件注册
app.use(templateUi);

app.mount("#app");

按需引入

import { createApp } from "vue";
import App from "./App.vue";
import { BtLoading, BtUploader } from "@bytetrade/bytetrade-ui";
const app = createApp(App);
//组件注册
app.use(BtLoading);

app.mount("#app");

Quasar中全局引入

// ./boot/smartEnginEntrance.js
import { boot } from 'quasar/wrappers';
import BytetradeUi from '@bytetrade/bytetrade-ui';

export default boot(async ({ app }) => {
	app.use(BytetradeUi);
});

Quasar中局部引入

// ./boot/smartEnginEntrance.js
import { boot } from 'quasar/wrappers';
import { BtLoading } from "@bytetrade/bytetrade-ui";

export default boot(async ({ app }) => {
	app.use(BtLoading);
});

在组件中使用

<template>
  <div>
    <BtLoading 
      :show="true"
      textColor="#ffffff"
      color="#ffffff"
      text="Loading"
      backgroundColor="rgba(0, 0, 0, 0.4)"
    />
  </div>
</template>

<template>
  <div>
    <BtUploader 
      :width="100" 
      :height="100"
      type="img"
      :size="5"
      name="upload"
      accept=".jpg, image/*"
      action="1d37ca110a2a8d40/upload/"
      :config="config"
      :parmas="parmas"
      @ok="ok"
      @fail="fail"
    > 
    <span>
      uploader
    </span>
    </BtUploader>
  </div>
</template>

  <TerminusAvatar 
    did="a11592"
    account="seal"
    :size="48"
  />

Customize configuration

See Configuration Reference.