一. Tailwindcss
下载：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
使用 npm 安装 Tailwind CSS 后，通过 npx 执行 init 命令可以方便地生成配置文件，确保使用的是本地安装的版本，并简化了命令的执行过程。这种方式提高了开发效率，减少了潜在的版本冲突问题。
报错：
在使用 npm 执行 npx tailwindcss init -p 时，出现了错误提示：“could not determine executable to run”。以下是可能的原因及解决方案：
-
未正确安装 Tailwind CSS：确保运行 npm install -D tailwindcss postcss autoprefixer。
-
npm 缓存问题：清除 npm 缓存，使用命令 npm cache clean --force。
-
Node.js 和 npm 版本问题：检查 Node.js 和 npm 版本，确保它们是最新的。
-
全局安装问题：确保在项目目录中使用 npx 命令。
-
究极解决方案：删除node-modules,删除package-lock。卸载Tailwindcss。清除缓 存。然后重新下载。
使用方法：
初始化配置文件
安装完成后，使用以下命令生成 Tailwind CSS 的配置文件：
npx tailwindcss init -p
这将创建两个文件：
-
tailwind.config.js：用于配置 Tailwind CSS。
-
postcss.config.js：用于配置 PostCSS。
2. 配置 Tailwind CSS
在 tailwind.config.js 文件中，你可以自定义 Tailwind 的主题、颜色、间距等。例如：
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx}'], // 指定需要扫描的文件
theme: {
extend: {
colors: {
customColor: '#1c1c1e',
},
},
},
plugins: [],
};
3. 引入 Tailwind CSS
在你的 CSS 文件中引入 Tailwind 的基础样式、组件和工具类：
@tailwind base;
@tailwind components;
@tailwind utilities;
4. 使用 Tailwind CSS 类
在你的 HTML 或 JSX 文件中，使用 Tailwind CSS 提供的类来构建样式。例如：
<div class="bg-gray-800 text-white p-4 rounded-lg">
<h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1>
<p class="mt-2">这是一个使用 Tailwind CSS 构建的示例。</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
点击我
</button>
</div>
安装提示插件，写classname的时候点空格可以触发提示
二. Allotment 组件
官网 allotment
Allotment 是一个用于创建可调整大小的面板布局的 React 组件，适用于构建复杂的用户界面。基本用法示例如下：
下载：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
使用方法：
import { Allotment } from 'allotment';
const Editor = () => {
return (
<Allotment>
<Allotment.Pane preferredSize={240} maxSize={300} minSize={200}>
Material
</Allotment.Pane>
<Allotment.Pane>
Editor
</Allotment.Pane>
<Allotment.Pane preferredSize={300} maxSize={500} minSize={300}>
Setting
</Allotment.Pane>
</Allotment>
);
};
遇到的问题：
1.解决 Failed to resolve import "allotment" 问题 在 src/editor/index.tsx 文件中，导入的 allotment 模块无法被解析。可能的原因及解决方案包括：
-
未安装 Allotment 库：运行 npm install allotment。
-
安装路径问题：检查 node_modules/allotment 是否存在。
-
导入路径错误：确保导入语句正确。
-
重启开发服务器：尝试重启开发服务器。
-
究极解决方案：删除node-modules,删除package-lock。清除缓存。然后重新下载。
2.没有报错，但是页面没有显示出来。也没有可拖动的显示框。 打开浏览器，能看到元素，的但是没有显示。可能是css出问题了 我检查之后发现：全局样式影响了 Allotment 的布局
body {
//原本的css是：没有指定宽高。
margin: 0;
display:flex;
place-item:center;
}
body {
//修改后就可以正常显示了：
margin: 0;
min-width: 320px;
min-height: 100vh;
}
三. Zustand 的用法
下载
npm install --save zustand
Zustand 是一个轻量级的状态管理库，适用于 React 应用程序。基本用法如下：
创建
Storeimport create from 'zustand';
const useStore = create((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),}));
使用
Storeimport React from 'react';
import { useStore } from './store';
const Counter = () => {
const { count, increase, decrease } = useStore();
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increase}>Increase</button>
<button onClick={decrease}>Decrease</button>
</div>
);
};
使用set里面的state可以类比，类里面的this。虽然在 Zustand 中，state 是一个函数参数，代表当前的状态，而 this 是类实例的上下文。但是使用方法相似。
Zustand 的 API 非常简单，使用 create 函数创建 store，使用 useStore 钩子访问状态和操作。 Zustand 允许你根据需要定义状态和操作，可以轻松组合多个 store。
Zustand 支持中间件，可以用于增强 store 的功能。例如，使用 persist 中间件来持久化状态：
import create from 'zustand';
import { persist } from 'zustand/middleware';
const useStore = create(persist((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),
}), {
name: 'counter-storage', // 存储的名称
}));
这个是最近学习和使用这几个库的时候遇到的问题，和笔记。感谢你的阅读。 点击爱心，会有好运哦。
