title: Uncaught ReferenceError: jQuery is not defined - webpack/vue-cli/semantic-ui
body: <p>I tried to use vue-cli to create my vue project and using semantic ui. Please review my steps:</p>
  
  <ol>
  <li>vue init webpack test</li>
  <li>npm install</li>
  <li>npm install semantic-ui --save</li>
  </ol>
  
  <p>then my project structure looks as below.</p>
  
  <p><a href="https://i.stack.imgur.com/rfkzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rfkzN.png" alt="enter image description here"></a></p>
  
  <p>my webpack.base.config</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict'
  const path = require('path')
  const utils = require('./utils')
  const config = require('../config')
  const vueLoaderConfig = require('./vue-loader.conf')
  
  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }
  
  module.exports = {
    entry: {
      app: './src/main.js'
    },
    output: {
      path: config.build.assetsRoot,
      filename: '[name].js',
      publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('src'), resolve('test')],
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src'), resolve('test')]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('media/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>my main.js file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App'
  import router from './router'
  import '../semantic/dist/semantic.min.css'
  import '../semantic/dist/semantic.min.js'
  
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>in my vue file, I add some semantic-ui elements, then run the command 'npm run dev', I got the exception</p>
  
  <p>Uncaught ReferenceError: jQuery is not defined</p>
  
  <p>Anyone can help?</p>