在前端开发中有很多工具可以帮助开发人员快速构建出一个完美的项目，比如React、Angular、Vue等框架。而这些框架功不可没的一个工具就是npm，npm是一个Node.js的包管理器，可以管理各种各样的包。其中，bse-admin包是一种用于快速构建基于Bootstrap 3的管理面板的开源工具，下面就来一起学习如何使用它。
安装
要使用bse-admin包需要先安装Node.js和npm。如果您已经安装好了这些工具，可通过以下命令安装bse-admin：
npm install bse-admin
安装完成后，在项目的根目录下使用以下命令启动：
npm start打开浏览器访问 http://localhost:8080/ ，即可看到bse-admin的管理面板。
项目结构
bse-admin有一个很好的项目结构，如下：
config目录：配置文件。public目录：静态资源文件。scripts目录：启动脚本。src目录：源码文件。
使用方法
- 在
src目录下新建一个 jsx 文件，即新建一个组件。
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ----- ------- ------- --------- - -------- - ------ - ----- ------ ---------- ------ -- - - ------ ------- --------展开代码
- 在
src/router/目录下添加路由组件。
-- -------------------- ---- ------- ------ ------- ---- ------------------------ ------ ----- ------ - - - ----- ---- ------ ----- ---------- -------- -- -- --- --展开代码
- 在
src/baseLayout/index.jsx文件中添加导航菜单。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- ---- ------ - ---- ------------------ ------ ----- ------------ - - -------- ------------ ------------------------ -- --- -- ----- ---------- ------- --------------- - -------- - ------ - ----- -------- --------------- -------------- -- ---------------------- --------------- ---------------- ----- -------------- ------ --------- --------------------- ------ -- - - ------ ------- -----------展开代码
- 添加自己的组件
在 src/baseLayout/index.jsx 中添加你新建的组件，具体示例如下：
-- -------------------- ---- ------- ------ ------- ---- ------------------------ ------ ----- ---- -------- ------ - ------- ----- - ---- ------------------- ------ -------- ---- ------------- ------ ----- ------------ - - -------- ------------ ------------------------ -- --- -- ----- ---------- ------- --------------- - -------- - ------ - ----- -------- --------------- -------------- -- ---------------------- --------------- ---------------- ----- -------------- ------ --------- -------- ------------------- ------ -- - ------ ----------- ----------------- ------------------- --------------------------- -- --- ------ --------------- ------------------- -- --------- ------ -- - - ------ ------- -----------展开代码
总结
bse-admin作为一个方便快捷的项目管理工具，在前端开发中被广泛使用。为了更好地使用它，我们需要在安装之后正确配置项目结构和导航菜单，添加自己的组件。希望本篇文章能够对大家学习使用bse-admin有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde53cd
