0.1.11 • Published 10 months ago

lp-custom-components v0.1.11

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

工具类组件库(自己工作中用到的一些工具方法和封装的组件)

相关技术栈

  • Vue3
  • Vite
  • Element Plus
  • scss
  • typescript

组件列表

  • LpButton loading按钮
  • LpTable 表格
  • LpRemoteSelect 远程搜索下拉框
  • LpTablePage 分页器
  • LpSearchForm 搜索表单

安装

npm install lp-custom-components

快速使用

组件说明

components

// 全局引入
import LpCustomComponents from 'lp-custom-components'
// 按需引入
import { LpButton, LpTable, LpSvgIcon } from 'lp-custom-components'
// 引入样式
import 'lp-custom-components/lib/style.css'

Vue.use(LpCustomComponents)
Vue.use(LpButton)
Vue.use(LpTable)
Vue.use(LpSvgIcon) 
// 创建src/assets/svgs目录下添加svg文件
// npm install vite-plugin-svg-icons -D
// npm install fast-glob -D

// vite.config配置
、、、js
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹
      iconDirs: [path.resolve(__dirname, 'src/assets/svgs')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
});
、、、

// webpack配置
npm install svg-sprite-loader fast-glob --save-dev
// webpack.config.js
```js
const path = require('path');
const glob = require('fast-glob');
module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 其他规则...
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[dir]-[name]',
            },
          },
        ],
        include: [path.resolve(__dirname, 'src/assets/svgs')],
      },
    ],
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  // 其他配置...
};
### utils
```bash
import { utils } from 'lp-custom-components'
0.1.11

10 months ago

0.1.10

10 months ago

0.1.9

10 months ago

0.1.8

10 months ago

0.1.7

10 months ago

0.1.6

10 months ago

0.1.5

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.1.2

10 months ago