前端反卷计划-组件库-02-storybook

最新推荐文章于 2024-05-06 10:59:29 发布
最新推荐文章于 2024-05-06 10:59:29 发布
阅读量72 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaofei_liang/article/details/134288506
版权

Hi, 大家好！我是程序员库里。

今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。

在接下来的日子，我会持续分享前端反卷计划中的每个知识点。

以下是前端反卷计划的内容：

image.png

image.png

目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习！

安装storybook

npx storybook@latest init

改造项目

将storybook初始化的项目结构改造成这样的结构

改造前：

改造后：

系列篇

前端反卷计划-组件库-01-环境搭建

持续更新

目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习！

程序员库里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-storybook-tailwind：使用VueJS和TailwindCSS创建由Storybook驱动的UI组件的起点
02-03
Vue，故事书和尾风 :smiling_face_with_heart-eyes:项目设置yarn开始故事书yarn storybook写故事故事位于stories文件夹中。 任何以stories.js结尾的... :)编译和热重装以进行开发（Storybook之外的前端） yarn serve
前端反卷计划-组件库-03-组件样式
chaofei_liang的博客
11-16 115
前端反卷计划-组件库-03-组件样式
vue3-ts-storybook：理解storybook、实践 / 前端组件库
snowball的博客
08-17 1096
因此，如果您想从头开始构建 Storybook 项目，则应使用 npx sb init ，如果您只是想将 Storybook 添加到现有项目中，则应使用 pnpm add --dev @storybook/vue。pnpm add是pnpm工具的添加依赖包命令，--dev表示是开发依赖包，@storybook/vue是storybook的vue框架的入口包。5、可以将组件的使用文档集成在一起，让组件的使用者更好地理解组件的用法和API。2、管理多个组件，按需展示和测试，帮助开发者更好地理解和组织组件库。
从零开始搭建storybook-vue的组件库（一）
sinat_34626741的博客
07-11 1906
storybook的安装说明
使用storybook构建vue前端组件库
Javon_huang的博客
06-28 1565
基于storybook构建vue组件库及配置sass
大前端学习笔记 -- 封装Vue.js组件库
爱玲姐姐的博客
09-29 1389
封装Vue.js组件库 一、组件库介绍 1. 开源组件库 Element-UI IView 2. 组件开发方式CDD 自下而上 从组件级别开始，到页面级别结束 3. CDD的好处 组件在最大程度上被重用 并行开发 可视化测试 二、处理组件边界情况 vue中处理组件边界情况的API 1. $root 01-root.vue <template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据 组件中可以通过 $
如何开发前端组件库
天道酬心
02-15 1679
自己如何开发前端组件库，自己开发的组件库应该达到什么效果，前端组件库用到了哪些知识点
storybook初探：利用storybook构建组件文档库
dasiylight的博客
08-03 3058
storybook初探：利用storybook构建组件文档库 之前的一些项目上用到了storybook来构建组件的文档库，虽不够完善，但仍总结了一些简单的内容以供回顾。 Storybook常用来打造团队的UI组件库，它可以对各个组件进行测试与编写文档。Storybook可以用于React，Vue和Angular上，本文主要介绍Storybook + React系统的构建。 本文将通过以下的顺序来介绍该系统的构建： 构建一个基本的react + storybook框架 完成一个基础的UI组件库 对
基于react+typescript的前端组件库violet-design（字节青训营项目）
weixin_44009656的博客
02-21 1624
大家好久不见呀！近一年没发文了。 本文简单介绍了，参加字节青训营和小伙伴们一起实现的项目：基于react+typescript技术栈实现的组件库violet-design 。希望大家支持鸭 violet-design 是基于react+typescript技术栈实现的组件库，包含7类共21个交互样式统一的组件，致力于提供功能丰富，使用简单，界面精美的UI解决方案。
nuxt2-storybook-vite：环境搭建、基础使用 / nuxt项目组件库
snowball的博客
08-25 830
这个错误是由于在使用 @vitejs/plugin-vue 插件构建项目时，需要安装 Vue.js 3.2.25 或更高版本，并且 Vue.js 编译器也需要被安装。Vue 2 项目并不支持 Vite，因为 Vite 是基于 ESM（ES6 模块）构建的工具，而 Vue 2 是基于 CommonJS 构建的。本文 nuxt2，使用的是 vue2.x 的版本，我们要使用 vue2 的基础上使用 vite，需要安装插件，进行vite配置。插件来实现在 Vue 2 项目中使用 Vite。
codetogether-frontend：Code CodeTogether的可重用Web前端组件库
02-04
CodeTogether的可重用组件库 该项目是通过。 有助于 编辑要求 系统要求 如何使用 下载专案 git clone [email protected]:AhmedAbdulrahman/codetogether.network.git 安装依赖项 yarn 在故事书中进行开发 yarn ...
scaffold-ui:前端React组件库开发脚手架
05-18
React + Storybook + Lerna 构建自己的前端 UI 组件库。 React 是目前非常流行的一个前端框架,组件化，虚拟 Dom，丰富的生态圈，能够快速的开发和更好的维护前端项目。 StoryBook 是一套 UI 组件的开发环境，它允许...
power-solutions-frontend-framework：Power Solutions Web应用程序中使用的前端组件库
02-06
Power Solutions Web应用程序中使用的前端组件库。发展最初设定nvm installnpm install -g [email protected] lerna bootstrap建立公共包yarn run build文献资料yarn run doc:serve故事书yarn run storybook:serve ...
fyndiq-ui：Fyndiq的可重用Web前端组件库
02-03
Fyndiq的可重用组件库 用法 在您的React项目中安装提供的软件包之一（请参见下面的列表）： npm i -S fyndiq-component-button 每个组件都使用CSSNext提供自己的样式。 因此，您需要能够在项目内部导入CSS文件。 ...
使用IIS部署Vue项目
最新发布
weixin_44656422的博客
05-06 300
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
大模型部署之前端页面编写框架，我选streamlit
人工智能
04-30 856
Streamlit是一个开源的Python库，它让数据科学家和开发者可以快速创建和分享美观的，交互式的Web应用。无需拥有前端开发经验，任何人都可以使用Streamlit将数据脚本转换为分享给非技术用户的交互式Web应用。它简化了Web应用的开发流程，让开发者能够专注于数据和业务逻辑，而不是UI代码。Streamlit的设计哲学是简洁高效，它通过减少样板代码的使用，使得创建数据驱动的应用变得前所未有的简单。
5-用户权限控制（前端）
qq_53568730的博客
04-29 332
注意：此时虽然可以实现用户权限控制的菜单显示，但仍可以通过url访问不属于自己权限的页面（这需要通过动态路由技术实现）3.在对应的侧边框组件中获取菜单数据，并通过循环遍历将其显示到页面。1.登录成功后，调用状态管理中对应的设置菜单的方法。2.将后端返回的菜单数据存入Cookie中。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 514
createWs("测试数据", (res) => {
storybook-addon-mock 详细教程
06-10
在组件的 stories 文件中，可以使用 storybook-addon-mock 提供的 `mock` 函数来创建假数据。例如： ``` import { mock } from 'storybook-addon-mock'; export default { title: 'MyComponent', parameters: { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值