npm 包 maas-gui-vanilla-theme-new 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

maas-gui-vanilla-theme-new 是一个 NPM 包，它提供了一套漂亮的基于 Vanilla JS 的 GUI 主题。使用这个包可以快速构建一些漂亮的 Web 应用程序。

安装

使用 npm 可以非常方便地安装它：

npm install maas-gui-vanilla-theme-new

使用

我们可以通过引入 CSS 文件，来使用这个包的主题。

<head>
  <link rel="stylesheet" href="node_modules/maas-gui-vanilla-theme-new/css/style.css">
</head>

以上是使用它的一种方法。

在深入了解使用它的功能之前，我们需要看一下构建项目的文件结构：

project/
├── index.html
├── js/
│  ├── main.js
└── css/
   └── style.css

接下来，我们需要创建 HTML，CSS 和 JS 文件来使用 maas-gui-vanilla-theme-new。

HTML

-- -------------------- ---- -------
--------- -----
------
  ------
    --------------------------------- ------------
    ----- ---------------- -------------------------------------------------------------
    ----- ---------------- ---------------------
  -------
  ------
    ---- ------------------
      ------------------------------ ---------
      ------- -- - ---- --- ------------------------------
      ------- ------------- ------------------- ---------------
      ------- ------------- ------------------- ---------------
      ------- ------------- ------------------- ---------------
      ------- ------------- ----------------- ---------------
      ----
        ----
          -- ------------- -----
        -----
        ----
          -- ------------- -----
        -----
        ----
          -- ------------- -----
        -----
      -----
    ------
    ------- --------------------------
  -------
-------

CSS

使用它提供的样式：

@import url('node_modules/maas-gui-vanilla-theme-new/css/style.css');

建议你在项目根目录中创建一个 CSS 文件，稍微修改一下样式：

-- -------------------- ---- -------
-- ------------- --

---------- -
  ---------- ------
  ------- - -----
  ----------- -------
  ------------ -----
-

-- -
  ----------- -----
  ------- ---- --
  
  -- -
    ------- - - -----
  -
-

JavaScript

接下来，我们就是在 JS 文件中根据自己的需求来使用了，这些 JS 功能十分简单：

-- -------------------- ---- -------
-- ----------

------ - ------- - ---- ----------------------------------------

----- ------------- - --------------------------------------
----- ------------- - --------------------------------------

---------------------- ----- -- - ------- ---------
---------------------- ----- -- - ------- ---------

指导意义

通过本教程，我们学会了如何：

安装 maas-gui-vanilla-theme-new NPM 包
使用该包的样式表来美化 Web 应用程序
从 JS 中使用包的功能

这里没有深入了解常规 Vanilla JS，所以推荐您学习 Vanilla JS，以提高您的 JS 技能。

示例代码

你可以在 Github 上找到一个完整的示例代码，该代码使用 maas-gui-vanilla-theme-new 和 Parcel 来构建网站。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562b481e8991b448dff35