@gypsophlia/create-ui

CreateUI 组件库

功能

• 全局加载
• 按需加载
• 介绍网站
• 国际化配置

组件

• Chatbox 畅聊气泡
• Loading 加载动画
• Toast 消息提示框
• Modal 模态对话框
• Musicbox 八音盒

安装

npm install @gypsophlia/create-ui -S

用法

全局引入

import CreateUI from "@gypsophlia/create-ui";
import "@gypsophlia/create-ui/lib/theme/index.css";
Vue.use(CreateUI);

按需引入

import { Chatbox } from "@gypsophlia/create-ui";
Vue.use(Chatbox);

按需引入配置

babel-plugin-component

安装插件

npm install babel-plugin-component -D

Babel 配置

plugins: [
  [
    "component",
    {
      libraryName: "@gypsophlia/create-ui",
      styleLibrary: {
        name: "theme",
        base: false,
      },
    },
  ],
];

babel-plugin-import

安装插件

npm install babel-plugin-import -D

Babel 配置

plugins: [
  [
    "import",
    {
      libraryName: "@gypsophlia/create-ui",
      styleLibraryDirectory: "lib/theme",
    },
  ],
];

或将以下配置写入vue.config.js中的 configureWebpack中

Webpack 配置

// webpack.config.js
resolve: {
  extensions: [".css"];
}