在 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>

参考链接：Using vue.js with semantic UI