lp-custom-components
v0.1.11
Published
A Vue 3 component library with Element Plus
Downloads
455
Readme
工具类组件库(自己工作中用到的一些工具方法和封装的组件)
相关技术栈
- 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'