在 Vue-cli 中引入 Semantic UI

首先，咱們須要先安裝 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--