在前一篇文章中：Semantic UI 和Element UI是否冲突
已经看出了 semantic ui 和element ui并不会产生冲突，所以，如果能在自己的网站中添加两个UI 组件，自己可以多一些选择，也能减少一个对UI的工作。由于项目在初始化时就是用的element ui, 就不在说明引入步骤了，那么如果在已有的项目中，添加semantic ui 组件呢？
准备
第一步：提交自己的项目代码，免得没有安装好，把自己的项目再弄得一团糟~
第二步：找到semant ui 官网：https://semantic-ui.com/introduction/getting-started.html
安装Semantic UI
哈哈~以上得当然都是废话，具体引入请看以下步骤：
本人项目使用 Vue：2.4.2， node: v8.11.4
- 安装node.js
- Install Gulp： npm install -g gulp
- Install sementic ui:
npm install semantic-ui --save， failed to install
cd semantic/
gulp build
在安装sementic ui时，使用npm貌似会有些小问题，这个时候你可以删除node_modules, 然后把package.json里面有问题得模块删除，再重新添加，多尝试几次，具体解决方案可参看
安装semantic ui报错
安装成功啦~
安装过程填入一些参数
安装成功
之后再执行
cd semantic/
gulp build
项目应用Semantic UI
semantic 已经安装成功，那么我们在项目中引入，使用，查看结果如何。
此处我采用的是全局的引用，在main.js中添加：
import '../semantic/dist/semantic.js'
import '../semantic/dist/semantic.css'
之后，随便找一个界面，使用semantic ui的组件看结果就好了，例如此时添加一个button：
<button class="ui button">按钮 </button>
界面显示（重点在右下角的button）：
对比官网提供的button样式：
好了，大功告成，以后就可以semantic ui 和element ui 一起使用啦~
网友评论