在现代的前端开发中，我们经常需要使用各种组件，例如按钮、输入框和表格等等。这些组件通常需要自己造轮子，或者使用一些已经存在的组件库。而 npm 包 just-components 就是一种非常有用的组件库，它可以帮助我们快速、轻松地使用各种常用组件。本文将会介绍 npm 包 just-components 的使用方法。
安装
使用 just-components 的第一步就是要安装它。我们可以使用 npm 命令行工具来安装：
npm install just-components --save
使用
安装完成后，我们就可以在我们的项目中引入 just-components。我们可以使用以下方式来引入它：
import JustComponents from 'just-components' import 'just-components/dist/just-components.min.css'
注意，我们需要同时引入 CSS 文件和 JS 文件。
接下来，我们就可以在项目中使用组件了。下面是一个示例：
-- -------------------- ---- ------- ------ --- ---- ----- ------ -------------- ---- ----------------- ------ ---------------------------------------------- ----------------------- --- ----- --- ------- --------- ------------------------ ------------------------ --
在上面的示例中，我们先使用 Vue.use(JustComponents) 把 just-components 组件注册到 Vue 中，然后就可以在模板中像普通的 HTML 标签一样使用组件了。
just-components 支持的组件有：
- just-button
- just-checkbox
- just-radio
- just-select
- just-text-field
- just-textarea
我们可以在项目中使用这些组件，从而快速构建出我们需要的页面。
指南
just-components 提供了一些非常有用的指南，可以帮助我们更好地使用这个组件库。
风格
just-components 的组件风格非常简洁、现代。它们的默认样式适用于大多数项目，但我们仍然可以通过 CSS 定制这些组件的样式。
.just-button {
font-size: 16px;
padding: 8px 16px;
background-color: #f44336;
color: white;
border-radius: 4px;
}上面的样式将会把 just-button 组件的背景色改成红色，字体颜色改成白色，边框角度改成 4px。
自定义组件
just-components 还允许我们自定义组件，从而适应我们的项目需求。
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
-------- -----------
------ -
---------- -
----- -------
-------- --------
--
--
--------- -
----------- -- -
------ -
---------------- -----------
------ ---------------
-
--
--
-在上面的代码中，我们基于 just-button 组件定义了一个新组件 MyButton。这个组件增加了一个名为 textColor 的 props，用于指定文字颜色。
在 computed 选项中，我们根据 props 和 state 计算出了真实的样式。最后，我们需要在模板中使用新组件：
<my-button color="#f44336" text-color="white">Click me</my-button>
在上面的模板中，我们使用了刚刚定义的 MyButton 组件，并传递了 color 和 textColor 两个 props。
结论
npm 包 just-components 是一个非常有用的组件库，它可以帮助我们快速、轻松地使用各种常用组件。在使用它的时候，我们需要先安装它，并把 CSS 和 JS 文件引入到项目中。just-components 支持多种常用组件，同时也提供了非常有用的指南。如果我们需要定制自己的组件，也可以通过继承已有的组件来创建自定义组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556aa81e8991b448d3747