@be-ui/pc NPM | npm.io

一套基于ElementUI & Vue2做技术和组件封装，提供PC通用项目模板能力，提供一致的UI规范组件，更贴近业务落地场景，减少开发工作量

Requirements

vue@2.6.14
webpack@^5.0
node@^11(development)

Docs

Quick Start

npm i @be-ui/pc --save // or yarn add -D @be-ui/pc
npm install // or yarn

be-ui支持全局引入与按需引入两种使用方式，以下分别介绍：

全局引入

在你的vue工程项目的入口文件中进行引用插件并引入be-ui插件样式包即可。

// to main.js
import Vue from 'vue'
import BeUI from "@be-ui/pc";
import "@be-ui/pc/lib/lib-style/main.css";

Vue.use(BeUI)

按需引入

按需引入需要借助babel-plugin-component插件实现，首先需要先执行npm install babel-plugin-component，再在项目根目录下的babel.config.js文件中进行如下配置：

// 旧
module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'bgyfw-be-ui',
        styleLibraryName: 'lib-style'
      },
      'bgyfw-be-ui'
    ]
  ],
}

// 新
module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: '@be-ui/pc',
        styleLibraryName: 'lib-style'
      },
      '@be-ui/pc'
    ]
  ],
}

即可在项目中进行使用，形如：

<template>
  <div class="home">
    <be-button type="primary">
      点我打开
    </be-button>
  </div>
</template>
<script>
import {  BeButton } from '@be-ui/pc'
export default {
  components: {
    BeButton
  }
</script>