简介
werneo 是一款 npm 包，可以帮助前端开发者快速搭建一个响应式的基础 UI 库，轻松实现移动与 PC 端的自适应。它支持 TypeScript，并有助于提高代码的可维护性和易读性。
安装
在终端中运行以下命令，即可安装 werneo：
npm install werneo --save
使用 werneo
首先，在你的项目中，你需要引入 werneo 的 CSS 文件：
<head> <link rel="stylesheet" href="node_modules/werneo/dist/werneo.css"> </head>
然后，在你的 JS 文件中引入 werneo：
import { Werneo } from 'werneo';接下来，你可以使用 werneo 提供的组件来搭建 UI：
<div id="app"></div>
const werneo = new Werneo();
const app = document.getElementById('app');
const button = werneo.createButton('Click me!');
button.addEventListener('click', () => alert('Hello werneo!'));
app.appendChild(button);上面的代码将在页面中渲染一个按钮，点击它将弹出一个提示框，显示“Hello werneo!”。
响应式布局
werneo 可以帮助你轻松实现响应式布局。你可以使用 werneo 提供的样式类来控制组件的布局。
例如，在 PC 端，你想让一个按钮顶部与标题对齐，可以这样写：
<div class="container"> <h1>Page Title</h1> <button class="align-top">Submit</button> </div>
在移动端，你希望将标题和按钮排成一列，可以这样写：
<div class="container"> <h1 class="mb-2">Page Title</h1> <button class="btn-block mb-2">Submit</button> </div>
这样，你就可以轻松实现 PC 和移动端的自适应布局。
示例代码
下面是一个示例，演示了如何使用 werneo 来创建一个响应式的登陆表单：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
----- ---------------- -------------------------------------------
-------
------
---- ------------------
--------- ---------
---- -------------------
------ ----------------- ---------------
------ ------------ -------------------- ---------- ------------------ -------
------
---- -------------------
------ -------------------------------
------ --------------- -------------------- ------------- ------------------ ----------
------
---- ----------------- ------
------ --------------- ------------------------ --------------
------ ------------------------ ----------------------- ----------
------
------- ---------- ----------- -------------------------
------
------- --------------------------------------------------
--------
----- ------ - --- ---------
----- ---------- - ---------------------------------
----- ------------- - ------------------------------------
----- ------------- - ------------------------------------
----- ----------- - ---------------------------------------
--------------------------------------------
---------------------- - ----- -------
-----------------------------------------------
------------------------- - ----- ----------
---------------------------------------------------
------------------------------------- -- -- -
------------- - - ---------------- - ------------ - - ------------------- - -------------- - - -----------------------
--
---------
-------
-------总结
通过本教程，你已经了解了如何使用 werneo 创建一个响应式的 UI 库，并实现移动与 PC 端的自适应布局。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005752a81e8991b448ea433