npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@twtcer/lw-ui-plus

v1.0.1

Published

基于Vue3|Element-plus|Vite|Ts|二开组件|文档

Downloads

10

Readme

介绍

基于 vue3+ ts+ Element-plus 二次封装组件

学习Element-plus 二次封装基础组件文档

预览 详细组件案例文档

安装使用

pnpm add @twtcer/lw-ui-plus

全局注册使用

前提条件:使用项目必须全局注册 Element-plus组件库

// 在main.js中按下引入
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import locale from "element-plus/es/locale/lang/zh-cn";
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import LwUiPlus from '@twtcer/lw-ui-plus'
import '@twtcer/lw-ui-plus/lib/style.css'
const app = createApp(App)
// 注册所有图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  // 注册ElementPlus
  app.use(ElementPlus, {
    locale // 语言设置
    // size: Cookies.get('size') || 'medium' // 尺寸设置
  });
app.use(LwUiPlus)
app.mount('#app')

按需引入

// 在main.js中按下引入
import '@twtcer/lw-ui-plus/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {LwDetail, LwForm} from "@twtcer/lw-ui-plus"
</script>

全部组件如下

| 组件名称 | 说明 | | :-------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | | LwLayoutPage | 布局页面 | | LwLayoutPageItem | 布局页面子项 | | LwAdaptivePage | 一屏组件(继承TTable 及 LwQueryCondition 组件的所有属性、事件、插槽、方法) | | LwQueryCondition | 条件查询组件 | | LwTable | 表格组件 | | LwForm | 表单组件 | | LwSelectTable | 下拉选择表格组件 | | LwSelect | 下拉选择组件 | | LwDetail | 详情组件 | | LwButton | 防抖按钮组件 | | LwStepWizard | 步骤条组件 | | LwTimerBtn | 定时按钮组件 | | LwModuleForm | 模块表单/详情组件 | | LwDatePicker | 日期选择器组件 | | LwRadio | 单选组件 | | LwCheckbox | 多选组件 | | LwChart | 图表组件 | | LwTabs | 标签页组件 |

Use CDN in Project(暂不支持)

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/@twtcer/lw-ui-plus/lib/style.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="https://unpkg.com/@twtcer/lw-ui-plus@latest"></script>
</head>

lw-ui-plus Volar 组件类型提示

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions:{
  "types": [
      "@twtcer/lw-ui-plus/components.d.ts",
    ],
}

Vue3 + Vite项目中安装引入报如下错误的解决方法

把项目的vite版本升级到4+

安装依赖

注意: 本地环境版本最好安装 Node.js 16.x+pnpm 7.x+

npm install -g pnpm

pnpm install

本地运行 vuepress 中组件文档

// docs项目(文档demo示例)基于vue3+vite项目
npm run docs:dev

Thanks to all the contributors

Git 提交规范

  • ci: ci 配置文件和脚本的变动;
  • chore: 构建系统或辅助工具的变动;
  • fix: 代码 BUG 修复;
  • feat: 新功能;
  • perf: 性能优化和提升;
  • refactor: 仅仅是代码变动,既不是修复 BUG 也不是引入新功能;
  • style: 代码格式调整,可能是空格、分号、缩进等等;
  • docs: 文档变动;
  • test: 补充缺失的测试用例或者修正现有的测试用例;
  • revert: 回滚操作;