GithubHelp home page GithubHelp logo

wocwin / t-ui-plus Goto Github PK

View Code? Open in Web Editor NEW
182.0 182.0 32.0 33.66 MB

基于vue3+ts+Element-plus二次封装基础组件文档;vue3基础组件文档

Home Page: https://wocwin.github.io/t-ui-plus/

License: MIT License

JavaScript 0.79% Shell 0.18% TypeScript 8.32% Vue 90.48% HTML 0.23%
component components element-plus element-ui form select table tree typescript vite vitepress vue vue2 vue3 wocwin

t-ui-plus's People

Contributors

minkri avatar onedream2000 avatar peirm avatar wocwin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

t-ui-plus's Issues

打包后自定义样式丢失问题

本地运行后没问题,打包后样式丢失。

关键代码如下:

<template>
  <el-button class="j-button" v-bind="$attrs" @click="handleClick">
    <slot />
  </el-button>
</template>

<script setup lang="ts" name="JButton">
import { ref } from 'vue'
const props = defineProps({
  time: {
    type: Number,
    default: 1000,
  },
})
// 抛出事件
const emits = defineEmits(['click'])
const record = ref(0)
const handleClick = () => {
  let newTime = new Date()
  if (newTime.getTime() - record.value > props.time) {
    emits('click')
  }
  record.value = new Date().getTime()
}
</script>

<style lang="scss">
.j-button {
  border: 2px solid red;
}
</style>

其实就是多增加了个内置样式:

.j-button {
  border: 2px solid red;
}

本地运行效果(正常):
image

打包以后在别的项目引入效果(样式丢失,没有红色边框):
image

vite.config.ts配置如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import vueSetupExtend from 'vite-plugin-vue-setup-extend' // 设置neme属性
// import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import viteCompression from 'vite-plugin-compression' // 静态资源压缩
// import {visualizer} from 'rollup-plugin-visualizer' // 打包后的视图文件
import dts from 'vite-plugin-dts'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // dts(),
    vueJsx(),
    vueSetupExtend(),
    viteCompression({
      verbose: true,
      disable: false, // 不禁用压缩
      deleteOriginFile: false, // 压缩后是否删除原文件
      threshold: 10240, // 压缩前最小文件大小
      algorithm: 'gzip', // 压缩算法
      ext: '.gz', // 文件类型
    }),
    // visualizer({
    //   open:true,  //注意这里要设置为true,否则无效
    //   gzipSize:true,
    //   brotliSize:true
    // })
  ],
  server: {
    host: '0.0.0.0',
    port: 3300,
    open: true,
    https: false,
    proxy: {
      '^/mes': {
        target: `http://10.0.10.243:5000/mesv2/`,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/mes/, ''),
      },
      '^/portal-user': {
        target: `http://10.0.10.240:8172`,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/portal-user/, '/portal-user'),
      },
      '^/portal-sso': {
        target: `http://10.0.10.240:8171`,
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/portal-sso/, '/portal-sso'),
      },
    },
  },
  resolve: {
    // 配置别名
    alias: {
      // '@': resolve(__dirname, 'examples'),
      '@': resolve(__dirname, 'packages'),
    },
    // 类型: string[] 导入时想要省略的扩展名列表。
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs'],
  },
  build: {
    outDir: 'lib',
    // cssCodeSplit: true, // 强制内联CSS
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
    lib: {
      // entry: resolve(__dirname, 'packages/index.ts'),
      entry: './packages/index.ts',
      name: 'Jrj-UI',
      // formats: ['es', 'cjs'],
      // formats: ['es', 'umd', 'cjs'],
      fileName: 'Jrj-UI',
    },
  },
})

引入报错

Uncaught SyntaxError: The requested module '/node_modules/@wocwin/t-ui-plus/lib/t-ui-plus.umd.cjs?import' does not provide an export named 'default'

组件库文档无法跑起来

兄弟,这个好像文档无法渲染组件了。build也报错。usePageHead() is called without provider.

能帮忙调试出一个可用版本,让我学习下吗

组件使用出错,不显示

按照文档说明引入组件
image
image
image
image

页面上空白无法显示组件,控制台提示如下信息
image
image
image
试了其他组件也是一样的情况
image

这个问题有解决方法没?
也是Vue3 + TS + ElementPlus的项目,以下是项目中其他依赖的信息。
image

image
image

使用语法糖报错,加载允许md文件失败,是怎么回事

基础用法

:::demo 继承el-button所有属性

<template>
      <n-button type="tertiary">
      {{text}}
    </n-button>
</template>
<script lang="ts">
  export default {
    name: 'HomePage',
  };
</script>
<script setup lang="ts">
  import { ref } from 'vue';
  const text=ref('ab')
  
</script>

:::

不能获得完整的 TS 功能

发现组件代码都是通过透传来实现原生 antd 组件的属性定义:v-bind="$attrs"

有办法使用 ts 来获得改进吗?期望在外面使用 t-ui-plus组件的时候,也能获得内部原生 antd 组件的 ts 提示;

不支持TSX的组件

报错内容:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

组件的内容

仅仅是一个简单的jsx组件
/packages/test-demo/src/test-demo.vue

<script lang="tsx">
export default {
  name: 'TestDemo',
  render() {
    const hasContent = false
    return <div>{hasContent || <el-input />}</div>
  },
}
</script>

问题反馈

请问 1.1.12 之后版本是有破坏性的升级吗?我这边版本升级到 1.1.12的版本后项目报错
image

获取Select Options 不合理

这样获取options不是很合理,业务场景通常只会返回options结构的数据,而这个数据有可能多处用到而单独保存,建议params支持options,类型为Array<{label: string, value: number | string}>
image

按步骤引入组件后,项目运行报错

1、如您提供的官方安装指南:https://wocwin.github.io/t-ui-plus/components/
2、在项目目录通过cmd分别执行以下命令;
2.1、npm install @wocwin/t-ui-plus -S

21

2.2、pnpm add @wocwin/t-ui-plus -S

22

3、main.ts引入:

引入组件

4、T-ui-plus组件 Volar 类型提示:
4

5、问题:运行项目后打开报错如图所示:

5

6、问题:您之前文章中进群二维码已失效,可以麻烦提供一个新的吗?后续若遇到使用过程中的问题在群里请教下。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.