bfehub / vlib-starter Goto Github PK

View Code? Open in Web Editor NEW

74.0 1.0 13.0 1.85 MB

Vue3 组件库开发模板 & Vue3 组件库次佳实践指南。

Home Page: https://juejin.cn/column/7130951037547970567

License: MIT License

TypeScript 72.04% Vue 6.29% JavaScript 12.26% Shell 0.47% SCSS 2.84% Smarty 6.11%

vue vuecomponents

vlib-starter's Issues

组件 back-top/style/index.ts 无法引入vant button样式

运行examples后，发现按钮并没有vant的样式，但index.css的样式是有的，大概 import 'vant/es/button/style/index'这种方式无法引入？

当在examples项目中使用van-button，触发VantResolver后，才能有样式

通过命令自动生成的组件代码，不应该用到第三方组件库

例如以下代码片段，都用到了 vant ，然而通用组件库模板的话，不可能大家都会依赖 vant，建议用到的一些方法将其抽到 utils 使其可以脱离 vant 应该好一点

import { withInstall } from 'vant/es/utils'
import _Form from './src/form.vue'

export const Form = withInstall(_Form)
export default Form

export * from './src/props'

和

import { makeStringProp } from 'vant/es/utils'
import type { ExtractPropTypes } from 'vue'

export const formProps = {
  /**
   * 类型定义
   */
  type: makeStringProp(''),
}

export type FormProps = ExtractPropTypes<typeof formProps>

大佬是否可以升级一波依赖，似乎好多包版本过旧，例如typescript版本过低，vscode会有警告提示，以及pnpm@8以上，lock文件也有较大变化

Windows10系统下，执行命令fs报错，例如ui:build命令

PS D:\workspace_vscode\vlib-starter> pnpm ui:build

> @bfehub/[email protected] ui:build D:\workspace_vscode\vlib-starter
> pnpm --filter=vlib-ui build


> @bfehub/[email protected] build D:\workspace_vscode\vlib-starter\packages\vlib-ui
> gulp --require @esbuild-kit/cjs-loader -f scripts/build/index.ts

[19:57:17] Requiring external module @esbuild-kit/cjs-loader
[19:57:17] Working directory changed to D:\workspace_vscode\vlib-starter\packages\vlib-ui\scripts\build
[19:57:33] Using gulpfile D:\workspace_vscode\vlib-starter\packages\vlib-ui\scripts\build\index.ts
[19:57:33] Starting 'default'...
[19:57:33] Starting 'clean'...
[19:57:33] Finished 'clean' after 5.37 ms
[19:57:33] Starting 'buildModules'...
[19:57:33] Starting 'buildFull'...
[19:57:33] Starting 'buildStyle'...
[19:57:33] Starting 'generateTypes'...
[19:57:33] Starting 'generateHelper'...
[19:57:33] Finished 'generateHelper' after 34 ms
[19:57:34] The following tasks did not complete: default, <parallel>, buildModules, buildFull, buildStyle, generateTypes
[19:57:34] Did you forget to signal async completion?
node:internal/fs/utils:347
    throw err;
    ^

Error: ENOENT: no such file or directory, open 'D:\workspace_vscode\vlib-starter\packages\vlib-ui\dist\tags.json'
    at Object.openSync (node:fs:601:3)
    at Object.writeFileSync (node:fs:2249:35)
    at <anonymous> (d:\workspace_vscode\vlib-starter\node_modules\.pnpm\[email protected]\node_modules\components-helper\lib\index.js:568:12)
    at FSReqCallback.oncomplete (node:fs:198:23)
    at FSReqCallback.callbackTrampoline (node:internal/async_hooks:130:17) {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'D:\\workspace_vscode\\vlib-starter\\packages\\vlib-ui\\dist\\tags.json'
}

Node.js v18.16.1
D:\workspace_vscode\vlib-starter\packages\vlib-ui:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @bfehub/[email protected] build: `gulp --require @esbuild-kit/cjs-loader -f scripts/build/index.ts`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.

examples 目录下示例，无法成功运行

pnpm i
pnpm ui:build
cd examples
pnpm dev

报错

是否有计划支持多语言呢，例如arco这样通过README后缀区分

https://github.com/arco-design/arco-design-vue/tree/main/packages/web-vue/components/button

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.