lamb-ui v1.0.0

Lamb-UI

安装

使用 npm 安装

npm install lamb-ui

使用 yarn 安装

yarn add lamb-ui

快速上手

使用之前

您应该在一定程度上了解 vue 的相关概念、基础知识，这样在使用本框架的时候会更顺利

完整引入

在项目的入口文件（一般是 main.js）中配置

import { createApp } from 'vue'
import App from './App.vue'

// 完整引入组件
import LambUI from 'lamb-ui'
// 完整引入组件样式
import 'lamb-ui/lib/styles/index.css'

const app = createApp(App);

// 全局注册组件
app.use(LambUI);                // 注册组件需要在 mount(挂载) 之前哦

app.mount('#app')

按需引入

Vue CLI

在 Webpack工程 中借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的

首先安装 babel-plugin-import

# npm
npm install babel-plugin-import -D

# yarn
yarn add babel-plugin-import -D

然后，在 babel.config.js 中配置

module.exports = {
    plugins: [
        [
            'import',
            {
                libraryName: 'lamb-ui',
                libraryDirectory: 'lib',
                customStyleName: name => {
                    return `lamb-ui/lib/styles/${name}.css`;
                }
            },
            'lamb-ui'
        ]
    ]
};

Vite

在 Vite工程 中 借助 vite-plugin-style-import，我们可以只引入需要的组件，以达到减小项目体积的目的

首先安装 vite-plugin-style-import

# npm
npm install vite-plugin-style-import -D

# yarn
yarn add vite-plugin-style-import -D

然后，在 vite.config.js 中配置

import styleImport from 'vite-plugin-style-import';

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'lamb-ui',
          ensureStyleFile: true,
          resolveStyle: name => {
            return `lamb-ui/lib/styles/${name}.css`;
          },
          resolveComponent: name => {
            return `lamb-ui/es/${name}`;
          }
        }
      ]
    }),
    ...
  ]
})

引入

import { createApp } from 'vue'
import App from './App.vue'
// 按需引入需要的组件
import { Button, Link } from 'lamb-ui'

const app = createApp(App);
// 全局注册组件                        // ps 也可以在单组件文件 (xxx.vue )  中 局部注册哦
app.use(Button);                 
app.use(Link);                       // 注册组件需要在 mount(挂载) 之前哦

app.mount('#app')

备注

import { Button, Link } from 'lamb-ui'
// 通过前面对 babel.config.js 或 vite.config.js 的配置
// 这段代码在生产环境将被解析为: 

import Button from 'lamb-ui/lib/button.js'
import 'lamb-ui/lib/styles/button.css'

import Link from 'lamb-ui/lib/link.js'
import 'lamb-ui/lib/styles/link.css'

组件

Selector

prop 参数

TreeMenu

prop

Link

prop

Button

prop

Carousel

prop

Events

Stars

prop

Events

Magnifier

prop