wocwin / t-ui-plus Goto Github PK
View Code? Open in Web Editor NEW基于vue3+ts+Element-plus二次封装基础组件文档;vue3基础组件文档
Home Page: https://wocwin.github.io/t-ui-plus/
License: MIT License
基于vue3+ts+Element-plus二次封装基础组件文档;vue3基础组件文档
Home Page: https://wocwin.github.io/t-ui-plus/
License: MIT License
form是否可以配合 unplugin-vue-component 实现按需加载吗?
本地运行后没问题,打包后样式丢失。
关键代码如下:
<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;
}
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',
},
},
})
请问如何全局size, elementui 的话可以通过use(ElementPlus, { size: 'small', zIndex: 3000 }), 但t-ui-plus底层应该是按需加载了 element, 我尝试instance.use(TuiPlus, { size: "large" })时无效
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'
packages下的组件是否可以做单元测试,例如vitest等工具
兄弟,这个好像文档无法渲染组件了。build也报错。usePageHead() is called without provider.
能帮忙调试出一个可用版本,让我学习下吗
:::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>
:::
{
prop: 'enableStatusLabel',
label: '状态',
minWidth: '80',
render: (text, record) => {
return (
<el-switch
active-value={1}
inactive-value={2}
v-model={record.enableStatus}
onChange={() => handleStatusChange(record)}
>
{text}
)
},
},
发现组件代码都是通过透传来实现原生 antd 组件的属性定义:v-bind="$attrs"
;
有办法使用 ts 来获得改进吗?期望在外面使用 t-ui-plus组件的时候,也能获得内部原生 antd 组件的 ts 提示;
[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>
Cannot read properties of undefined (reading 'bind')
at index.vue:649:39
群二维码过期了
1、如您提供的官方安装指南:https://wocwin.github.io/t-ui-plus/components/
2、在项目目录通过cmd分别执行以下命令;
2.1、npm install @wocwin/t-ui-plus -S
2.2、pnpm add @wocwin/t-ui-plus -S
3、main.ts引入:
5、问题:运行项目后打开报错如图所示:
6、问题:您之前文章中进群二维码已失效,可以麻烦提供一个新的吗?后续若遇到使用过程中的问题在群里请教下。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.