新鮮的Semantic-UI
優(yōu)秀的前端界面框架，語義化的標(biāo)簽更容易理解與記憶赋焕，不過相比于bootstap仰楚，組件還是少了一些犬庇。但可以在個(gè)人項(xiàng)目用來嘗嘗鮮侨嘀，因?yàn)樗銐蚱梁秃喖s。
與vue的結(jié)合
安裝&編譯
安裝方法如下：
npm install semantic-ui --save
安裝過程中會有一些選項(xiàng)提示欢峰，按照默認(rèn)選擇回車即可涨共，這里不會將它安裝到node_modules中，事實(shí)有些配置還是需要我們修改的抛计，比如它就默認(rèn)引用了來至于google的字體樣式照筑，這個(gè)顯然是需要修改的，將修改后的代碼打包后才能在項(xiàng)目中引用的凝危。默認(rèn)情況下，vue項(xiàng)目結(jié)構(gòu)如下:
- build
- config
- dist
- src
- semantic
- dist
- src
Semantic-UI 使用gulp構(gòu)建懦铺，確保本地全局安裝過gulp支鸡，構(gòu)建如下：
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>
使用實(shí)例
Semantic-UI依賴于jQuery來調(diào)動組件裆针。需要在ready函數(shù)中進(jìn)行組件初始化寺晌。以下是一個(gè)下拉列表的示例。
<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 的值不會渲染到界面中耘婚，需要手動設(shè)置陆赋，這是一個(gè)很坑爹的地方嚷闭，正在尋求解決方案戈轿。阵子。。
this.$nextTick(function () {
$('#s1').dropdown('set selected', this.someModel)
)}
}
</script>
在github上色乾，Semantic-UI的vue組建貌似并不多（angular+bootstrap卻是非常非常多）领突，所以很多東西需要在使用過程中手動造車輪，比如輪播圖澎办、分頁組件金砍。本人自己造的勉強(qiáng)能用，還不敢拿出來獻(xiàn)丑琅绅，準(zhǔn)備磨煉一段在貢獻(xiàn)出來鹅巍。
