新鲜的Semantic-UI
优秀的前端界面框架，语义化的标签更容易理解与记忆，不过相比于bootstap，组件还是少了一些。但可以在个人项目用来尝尝鲜，因为它足够漂亮和简约。
与vue的结合
安装&编译
安装方法如下：
npm install semantic-ui --save
安装过程中会有一些选项提示，按照默认选择回车即可，这里不会将它安装到node_modules中，事实有些配置还是需要我们修改的，比如它就默认引用了来至于google的字体样式，这个显然是需要修改的，将修改后的代码打包后才能在项目中引用的。默认情况下，vue项目结构如下:
- build
- config
- dist
- src
- semantic
- dist
- src
Semantic-UI 使用gulp构建，确保本地全局安装过gulp，构建如下：
cd semantic
gulp build
编译好的文件存放在semantic/dist目录下，包括js、css等
引用
可以先对semantic目录配置别名:
resolve: {
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'semantic': path.resolve(__dirname, '../semantic')
}
},
在js与css中引用：
<script>
import 'semantic/dist/semantic'
</script>
<style lang="less">
@import "~semantic/dist/semantic.min.css";
</style>
<scrip>
使用实例
Semantic-UI依赖于jQuery来调动组件。需要在ready函数中进行组件初始化。以下是一个下拉列表的示例。
<template>
<select id="s1" v-model="semeModel" class="ui dropdown">
<option value="-1">defult</option>
<option value="1">value1</option>
</select>
</template>
<script>
export default{
data{
someModel:1
},
ready:function(){
$('#s1').dropdown()
//这里 someModel 的值不会渲染到界面中，需要手动设置，这是一个很坑爹的地方，正在寻求解决方案。。。
this.$nextTick(function () {
$('#s1').dropdown('set selected', this.someModel)
)}
}
</script>
在github上，Semantic-UI的vue组建貌似并不多（angular+bootstrap却是非常非常多），所以很多东西需要在使用过程中手动造车轮，比如轮播图、分页组件。本人自己造的勉强能用，还不敢拿出来献丑，准备磨炼一段在贡献出来。
