在前端开发中，使用 UI 框架可以大大提高开发效率。semantic-ui-vue2 是一个 Vue 组件库，提供了一套美观且易于使用的 UI 组件，并且支持自定义主题样式。这篇文章将介绍如何使用 semantic-ui-vue2，在项目中引入并使用常用组件。
安装
可以通过 npm 方式安装 semantic-ui-vue2，安装命令如下：
npm install semantic-ui-vue2 --save
引入
在项目中引入 semantic-ui-vue2，需要注册所有组件，代码示例如下：
import Vue from 'vue' import SemanticUIVue from 'semantic-ui-vue2' Vue.use(SemanticUIVue)
当然，如果只需要使用部分组件，可以按需引入，代码示例如下：
import Vue from 'vue'
import { Button, Input } from 'semantic-ui-vue2'
Vue.use(Button)
Vue.use(Input)使用
以下是常用组件的使用方式。
Button
Button 是一个按钮组件，可以设置不同的颜色和大小，代码示例如下：
-- -------------------- ---- -------
----------
-----
------- --------- ---------------------
------- --------- ------ ----------------------
------- --------- ------ ------------------------
------- --------- ------ --------------------
------- --------- ------ ----------------------
------- --------- ------ -------------- ------------ ------- -------------------
------
-----------Input
Input 是一个输入框组件，可以用于获取用户输入，代码示例如下：
-- -------------------- ---- -------
----------
-----
---- --------- -------
------ ----------- --------------------
------
---- --------- ------ -------
------ ----------- --------------------
------- --------- ---- ---------- ------------- -------------------
------
------
-----------Dropdown
Dropdown 是一个下拉框组件，可以选中其中一项，代码示例如下：
-- -------------------- ---- -------
----------
-----
---- --------- --------- ----------
------ ------------- --------------
-- --------------- ----------
---- -------------- -----------------
---- -------------
---- ------------ -------------------------
---- ------------ ---------------------------
---- ------------ ---------------------------
------
------
---- --------- ----- -------- --------- ----------
------ ------------- ---------------
-- --------------- ----------
---- -------------- -----------------
---- -------------
---- ------------ ------------------------
---- ------------ ------------------------
---- ------------ ------------------------
------
------
------
-----------Checkbox
Checkbox 是一个多选框组件，可以选中多个选项，代码示例如下：
-- -------------------- ---- -------
----------
-----
---- --------- ----------
------ --------------- -------------
-----------------
------
---- --------- ----------
------ --------------- -------------
-----------------
------
---- --------- ----------
------ --------------- -------------
-----------------
------
------
-----------Radio
Radio 是一个单选框组件，只能选中其中一个选项，代码示例如下：
-- -------------------- ---- -------
----------
-----
---- --------- ----- ----------
------ ------------ ------------- -------------
----------------
------
---- --------- ----- ----------
------ ------------ ------------- ---------------
----------------
------
---- --------- ----- ----------
------ ------------ ------------- --------------
-----------------
------
------
-----------Table
Table 是一个表格组件，可以展示数据，代码示例如下：
-- -------------------- ---- -------
----------
-----
------ --------- ------ -------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
--- -----------------------
--- ----------------------
--- -----------------------
-----
----
--- -----------------------
--- ----------------------
--- -----------------------
-----
----
--- -----------------------
--- -----------------------
--- -----------------------
-----
--------
--------
------
-----------自定义主题样式
semantic-ui-vue2 支持自定义主题样式。可以在安装包后创建一个 semantic-ui 目录，在其中创建 themes 和 site 目录。在 themes 目录中创建自定义主题的样式文件，在 site 目录中创建一个 semantic.less 文件，引入自定义主题样式和 semantic-ui-vue2 的样式，代码示例如下：
-- -------------------- ---- ------- -- -------------------- ------- -------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------- ------- ----------------------------------------------------------------------- ------- ------------------------------------------------------------------------- -------------------- ----- ----------------- ----- ----------------- - ----------------- -------------------- ------ ----------------- - -- ------------------ ------- -------------------------------------------------------------------- ------- ------------------------------------------------------------------- ------- ----------------------------------------- ------- ---------------------------------------------------------------------- ------- ------------------------------------------------------------------------- ------- ----------------------------------------------------------------------- ------- ----------------------------------------------------------------------- ------- -------------------------------------------------------------------- ------- ------------------------------------------------------------------------
最后，在 App.vue 文件中引入 semantic.less 文件，代码示例如下：
-- -------------------- ---- -------
----------
---- ------------
---
------
-----------
------ ------------
------- ---------------------------------------------
--------结语
以上是 semantic-ui-vue2 的使用教程，包含了常用的组件和自定义主题样式。希望能对初学者有所帮助，也欢迎更多的开发者提供意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c9c81e8991b448da003