# 在 vue-cli 中引入 SemanticUI


首先，我们需要先安装 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](http://twitter.com/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>
```


![](https://cdn.hashnode.com/res/hashnode/image/upload/v1605152223132/ZQnl7xUpT.jpeg)

参考链接：[Using vue.js with semantic UI](http://stackoverflow.com/questions/36676215/using-vue-js-with-semantic-ui)