2.2 拓展知识构建自己的 UI 组件库
UI 组件库是一组现成的 UI 组件,例如按钮、输入、对话框等。它们用作布局的构建块。由于它们的模块化特性,我们可以以多种不同的方式排列组件以实现独特的效果。每个库都有独特的外观和感觉,但它们中的大多数都提供主题,并且它们的组件是可定制和可重用的。 我将引导您完成创建自己的 UI 组件库的过程:
- React
- TailwindCSS
- storybook
- NPM
创建一个新的 React 项目并安装 TailwindCSS
npx create-react-app storybook-postcss-tailwind
初始化 TailwindCSS。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- 在
tailwind.css
文件中,添加以下行:
@tailwind base;
@tailwind components;
@tailwind utilities;
使用 npx创建
tailwind.config.js
。--full
与 Tailwind 内部使用的默认配置文件匹配的选项脚手架文件。
npx tailwindcss init --full
- 在
tailwind.config.js
文件中,添加以下配置purge:[]
:
"./src/**/*.{js,ts,jsx,tsx}"}
安装postcss-cli并创建
postcss.config.js
文件。
npm install -D postcss-cli
- 在 postcss.config.js 中,添加以下内容:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
安装 Storybook 并创建一个新组件
使用以下命令初始化 Storybook:
npx sb init
创建示例组件
src/lib/components/Button/Button.js
,并带有一些样式:
import React from ‘react’
import PropTypes from 'prop-types'
const Button = ({ label }) => {
return (
<div>
<button
className='bg-red-500 text-white text-xl py-4 px-8 rounded-md'>{label}</button>
</div>
)
};
Button.propTypes = {
label: PropTypes.string.isRequired
};
Button.defaultProps = {
label: 'Button'
};
export default Button
src/lib/components/Button/Button.stories.js
使用以下内容创建:
import React from 'react';
import Button from './Button'
export default {
title: 'Example/Button',
component: Button,
};
const Template = (args) => <Button {...args} />
export const Default = Template.bind({})
Default.args = {
label: 'Button'
};
- 在内部
src/lib/index.js
,添加以下行:
import './styles/main.css';
import Button from './lib/components/Button/Button'
export {
Button
};
配置package.json
和其他依赖项
npm i -D cross-env @babel/cli @babel/preset-env @babel/preset-react
创建
babel.config.js
文件:
module.exports = function (api) {
api.cache(true);
const presets = [ "@babel/preset-env", "@babel/preset-react" ];
const plugins = [ "macros" ];
return {
presets,
plugins
};
}
为避免任何 React 冲突,您可以将以下 React 依赖项移动到对等依赖项:
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
- 在里面
package.json
,为 TailwindCSS 添加以下脚本:
"scripts": {
"build:tailwind": "postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css",
"build:tailwind-prod": "cross-env NODE_ENV=production postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css"
},
- 为了准备生产,我们需要在顶部添加以下脚本
package.json
:
"private": false,
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
- 仍然在里面
package.json
,在下面添加以下内容scripts
:
"scripts": {
"clean": "rimraf dist",
"compile": "npm run clean && cross-env NODE_ENV=production babel src/lib/ --out-dir dist --copy-files"
},
为生产构建和发布到npm
为生产构建tailwindcss:
npm run build:tailwind-prod
- 为生产编译组件:
npm run compile
- 如果您没有npm帐户,请创建一个。
- 执行以下命令:
npm login
- 执行以下命令:
npm publish
*就是这样!*我们设法使用 Storybook 和 TailwindCSS 获得了一个简单的 UI 库。这是如何创建 UI 组件库的一种选择。从这里您可以:
- 添加更多组件
- 为组件创建故事
- 为组件创建测试用例
- 以及更多…
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nextjs/storybooktailwindnextjs/2.2-%E6%8B%93%E5%B1%95%E7%9F%A5%E8%AF%86%E6%9E%84%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84-UI-%E7%BB%84%E4%BB%B6%E5%BA%93/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com