AdminLTE 使用教程

1. 项目目录结构及介绍

在克隆AdminLTE仓库后，你会看到以下主要目录结构：

AdminLTE/

├── dist/ 包含编译后的CSS和JavaScript文件，用于生产环境

├── node_modules/ 存放npm安装的依赖包

├── src/ 源代码目录，包括SCSS样式表、JavaScript组件等

│ ├── css/ CSS源文件

│ ├── js/ JavaScript源文件

│ └── ...

└── build/ 构建工具相关的文件

└── ...

dist/: 这是预编译后的文件夹，包含了可用于部署到生产环境的CSS、JS和其他资源。node_modules/: 由npm install安装的所有依赖项都位于此目录下。src/: 开发源码目录，可以在这里修改源代码以自定义你的AdminLTE实例。

src/css/: 主题的原始CSS源文件。src/js/: JavaScript组件和功能的源代码。

build/: 包含构建过程中的临时或配置文件。

2. 项目的启动文件介绍

AdminLTE的启动主要依赖于npm脚本，这些脚本在package.json中定义。以下是两个关键脚本：

npm run dev: 开发模式，它会自动编译源代码并启用BrowserSync，支持实时刷新浏览器，方便开发调试。npm run production: 生产模式，用于编译CSS和JS文件，优化并准备上线。

在终端中运行上述命令来启动相应的工作流程。

3. 项目的配置文件介绍

AdminLTE的主要配置并没有集中在单一的配置文件中，而是通过源代码目录(src)下的文件进行定制。例如，要更改主题颜色，你需要编辑src/scss/_variables.scss文件；若要调整JavaScript行为，可能需要修改src/js/adminlte.js。

对于更高级的配置，如改变Webpack或Gulp的设置，你可以在build/目录中找到相关配置文件。但通常，对于简单的使用，直接通过npm run dev和npm run production已足够满足大部分需求。

请注意，如果你需要进一步的自定义，建议阅读官方文档和示例，以了解如何正确地扩展和配置AdminLTE以符合你的项目需求。