npm 是一个被广泛使用的 Node.js 包管理器，它可以让你快速地获取和安装各种 Node.js 包。其中一个非常有用的 npm 包就是 gentelella-verkstedt，它是一个 Bootstrap 4 模板，带有多个页面和组件，可以用于快速构建漂亮的前端界面。
在本文中，我们将详细介绍 gentelella-verkstedt 的用法，包括如何安装、配置和使用它来构建前端应用程序。
安装
要安装 gentelella-verkstedt，首先要确保你已经安装了 Node.js 和 npm。安装完成后，在终端中打开以下命令：
npm install gentelella-verkstedt --save
这将会将 gentelella-verkstedt 包安装到你的项目中，并将其添加到你的 package.json 文件的依赖中。
配置
安装完成后，你需要将 gentelella-verkstedt 包与你的前端应用程序集成起来。为此，请在你的 HTML 文件中添加以下提示：
<link href="./node_modules/gentelella-verkstedt/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/vendors/nprogress/nprogress.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/vendors/iCheck/skins/flat/green.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"> <link href="./node_modules/gentelella-verkstedt/build/css/custom.min.css" rel="stylesheet">
这将加载 gentelella-verkstedt 包中使用的所有 CSS 文件。
接下来，在你的 HTML 文件中添加以下脚本：
-- -------------------- ---- ------- ------- ------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------------------------------ ------- -------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ ------- -------------------------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------------------------ ------- ----------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------
这将会加载 gentelella-verkstedt 包中使用的所有 JavaScript 文件。现在，你已经准备好开始使用 gentelella-verkstedt 构建前端应用程序了。
使用
使用 gentelella-verkstedt 构建前端应用程序非常容易。它提供了许多有用的组件和页面，包括仪表板、表单、表格、日历、消息框等。
以下是一个简单的例子，演示了如何创建一个数据表格：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------- ----------
----- --------------------------------------------------------------------------------------- -----------------
----- ---------------------------------------------------------------------------------------- -----------------
----- -------------------------------------------------------------------------- -----------------
----- ------------------------------------------------------------------------------ -----------------
----- ---------------------------------------------------------------------------------------------------------------- -----------------
----- ----------------------------------------------------------------------------- -----------------
----- ------------------------------------------------------------------- -----------------
-------
----- ---------------
---- ---------------- ------
---- -----------------------
---- --------------- ----------
---- --------------- -------------
---- ------------- ---------- -------------- ----
-- ----------------- --------------------- --------- ------------ ---------------------------
------
---- -----------------------
---- ---- ------- ----- ---- ---
---- ----- ------- ----- ---- ---
--- --
---- ------- ---- ---
---- ----------------- --------------------- ------------ -----------
---- ---------------------
----------------
--- ---------- -----------
------ ----------- --------- ------------- ---- ----
-----
------ ----------- --------- ------------- ----- ----
-----
------ ----------- --------- -------------- ------ ----
-----
------ ----------- --------- ----------------- -------- ----
-----
-----
------
------
---- -------- ---- ---
---- ----- ------ ------- ---
---- ----- ------ ------- ---
------
------
---- --- ---------- ---
---- ----------------
---- -----------------
-----
---- ---------- --------
-- ------------------- --------- -----------------
------
--- ---------- ---------- --------------
--- ---------
-- ------------------- ------------------- ---------------- ---------------------- ----------------------
---- --------------------- ----------- ---
----- ------- -- ----------------------
----
--- -------------------- ----------------- ------------
------ --------- ----------------
------ -------------- ------------ ------ ----------------------------------------------------
------ -------------- ------------ ---------- -----------------------------------
------ ----------- --------- ----------- ---------------- --- ------------
-----
-----
-----
------
------
------
---- ---- ---------- ---
---- ---- ------- ---
---- ----------------- ------------
---- ---------
---- -------------------
---- -------------------
---------------
------
------
---- -----------------------
---- ------------
---- ---------------- --------- -----------
---- ----------------
---- ----------------
-------------- ----------
--- ---------- ------------ ---------------
------ ------------------------ --------- -----------------------
-----
--- -----------------
-- -------- ----------------------- ---------------------- ------------- ------------------------ --------- -------------------
--- --------------------- ------------
------ ----------------- ----------
------ ----------------- ----------
-----
-----
------ --------------------- --------- ------------------
-----
-----
---- -----------------------
------
---- ------------------
------ -------------- ------------ ------------- ----------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
----------- ------------
-------------------
--------------
-----------
-------------------
-----------------
-----
--------
--------
------
------
------
------
------
------
---- ----- ------- ---
---- ------ ------- ---
--------
---- -------------------
---------- - --------- ----- -------- -- -- ----------------------------------------
------
---- -----------------------
---------
---- ------- ------- ---
------
------
------- -------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------
--------
---------------------------- -
----------------------------
---
---------
-------
-------这个例子创建了一个基本的页面，并使用 gentelella-verkstedt 的样式和 JavaScript 框架来创建一个数据表格。你可以使用这个例子来了解 gentelella-verkstedt 的简单用法，并为你的项目提供一个好的起点。
结论
npm 包 gentelella-verkstedt 提供了一种快速构建漂亮的前端界面的方法。在本文中，我们详细介绍了如何安装、配置和使用 gentelella-verkstedt，以及它提供的多个页面和组件。 我们希望你通过本文的学习能够更好地使用 gentelella-verkstedt 构建你的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564f581e8991b448e1949