在 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 文件：

效果如下：

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

--EOF--