Vue 引入semantic-ui 使用vue.config.js配置文件

之前根据网上的教程在vue中引入sematic UI库，结果发现样式是可以显示，但下拉框之类的功能不能实现，我猜可能是js文件没有导入。之后又查阅了一些博客，要在vue.config.js加入resolve之类的模块，但我的版本可能不支持，这里就记录一下我自己的引入方法吧。前端开发心累之处就在导包导包导包QAQ

安装JQuery

npm install --save jquery

安装sematic-ui

npm install semantic-ui-css --save

配置vue.config.js文件

以前的版本是在webpack.dev.config.js，这个文件需要自己建立和src文件是同级目录

var webpack = require('webpack')

module.exports = {
    lintOnSave: false,
    configureWebpack: {
        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'
            })]
    }
}

main.js引入

// 引入js文件，这里直接使用的是这个文件里的路径，不需要再resolver中修改路径之类的操作
import semantic from '../node_modules/semantic-ui-css/semantic.min.js'
// 引入css文件
import '../node_modules/semantic-ui-css/semantic.min.css'

Vue.use(semantic);