vue学习系列-vue结合Semantic-UI

新鲜的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中引用：

使用实例

Semantic-UI依赖于jQuery来调动组件。需要在ready函数中进行组件初始化。以下是一个下拉列表的示例。

在github上，Semantic-UI的vue组建貌似并不多（angular+bootstrap却是非常非常多），所以很多东西需要在使用过程中手动造车轮，比如轮播图、分页组件。本人自己造的勉强能用，还不敢拿出来献丑，准备磨炼一段在贡献出来。