首先,我们需要先安装 jQuery
npm install --save jquery
然后在 webpack.dev.config.js 文件中,添加
// plugins 区块内
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
"window.jQuery": "jquery",
"root.jQuery" : "jquery"
})
随后安装 semantic-ui-css
npm install semantic-ui-css --save
之后在 webpack.base.config.js 文件中添加,
// resolve 区块
resolve : {
extensions: ['', '.js', '.vue'],
fallback : [path.join(__dirname, '../node_modules')],
alias : {
'vue' : 'vue/dist/vue.common.js',
'src' : path.resolve(__dirname, '../src'),
'assets' : path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// Semantic-UI
'semantic' : path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
}
}
随后在 webpack.dev.config.js 文件中,添加
plugins: [
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
"window.jQuery": "jquery",
"root.jQuery" : "jquery",
// Semantic-UI
semantic : 'semantic-ui-css',
Semantic : 'semantic-ui-css',
'semantic-ui': 'semantic-ui-css'
}),
接下来,引入 css 和 js 文件:
import semantic from 'semantic'
import '../node_modules/semantic-ui-css/semantic.min.css'
接下来,我们要测试一下,添加一个 vue 文件:
<template>
<div class="semantic-component">
<div class="ui selection dropdown semanticDropDown">
<input type="hidden" name="gender" v-model="selected">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" :data-value="item.Value"
v-for="item in items"
@click="changeSelection(item)">
{{ item.Gender }}
</div>
</div>
</div>
<pre>{{ JSON.stringify(selectedItem) }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
items : [
{Gender: 'Male', Value: 1},
{Gender: 'Female', Value: 0}
],
selected : '',
selecteditem: {}
}
},
methods: {
changeSelection(item) {
this.selectedItem = item
this.selected = item.Value
}
},
mounted() {
this.selecteditem = {}
$(this.$el).find('.semanticDropDown').dropdown()
}
}
</script>
<style></style>
效果如下:
参考链接:Using vue.js with semantic UI
--EOF--