将 vue.js 与语义 UI 结合使用

Question

我正在尝试将 webpack + 语义 UI 与 Vue.js 一起使用，我发现了这个库 https://vueui.github.io/

但是编译有问题：

 ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.

所以我安装了 jade(pug) 但仍然没有运气。

该库在 github 中有评论：

WIP，请勿使用( https://github.com/vueui/vue-ui )

我已经设法在我的模板中导入语义 css，如下所示：

 @import './assets/libs/semantic/dist/semantic.min.css';

但这里的问题是我不能使用 semantic.js 功能，如调光器和其他东西。

问题是我已经有一些用语义编写的旧代码库，最好不要使用任何其他 css 框架（bootstrap 或 materialize）。

有什么优雅的方法可以在我的 vue.js 项目中包含语义 UI 吗？

原文由 T0plomj3r 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 如果未安装 jQuery（正确！），请安装它：

• npm install --save jquery
• 然后在您的 webpack.config 文件中（我只是将其添加到 webpack.dev.config.js 中，但也许将其添加到 prod 配置文件中）：

在插件中添加一个 new webpack.ProvidePlugin

   new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
  })

现在 jQuery 可用于所有应用程序和组件。

好消息是，对于您要使用的所有外部库（Numeral、Moment 等），这现在是相同的过程，当然还有 semantic-ui！

我们走吧 ：

• npm install --save semantic-ui-css

nb：您可以使用主仓库（即语义 ui），但语义 ui-css 是语义 ui 的基础主题。

所以，现在，你必须首先在 webpack.base.config.js 文件中定义别名：

在 resolve.alias 下添加语义别名：

 resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      // adding our externals libs
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
    }
  }

nb： 你可以把你的其他外部库别名放在那里：

 // adding our externals libs
      'moment': path.resolve(__dirname, '../node_modules/moment/min/moment-with-locales.js'),
      'numeral': path.resolve(__dirname, '../node_modules/numeral/min/numeral.min.js'),
      'gridster': path.resolve(__dirname, '../node_modules/gridster/dist/jquery.gridster.min.js'),
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js'),
      'stapes': path.resolve(__dirname, '../node_modules/stapes/stapes.min.js')

nb： 在那里使用你自己的路径（通常它们应该看起来像那些！）

……我们快结束了……

下一步是添加对插件提供者的别名引用，就像我们为 jQuery 做的那样 =)

 new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css'
})

nb ：这里我使用了几个名字，也许 语义 就足够了；-)

同样，您可以在那里添加您的库/别名：

 new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // gridster
      gridster: 'gridster',
      Gridster: 'gridster',
      // highcharts
      highcharts: 'highcharts',
      Highcharts: 'highcharts',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css',
      // Moment
      moment: 'moment',
      Moment: 'moment',
      // Numeral
      numeral: 'numeral',
      Numeral: 'numeral',
      // lodash
      '_': 'lodash',
      'lodash': 'lodash',
      'Lodash': 'lodash',
      // stapes
      stapes: 'stapes',
      Stapes: 'stapes'
    })

这是我在我自己的项目中使用的所有外部库（你可以看到 gridster，它是一个 jQuery 插件——就像 semantic-ui 一样！）

所以现在，只需要做最后一件事：

• 添加语义 css：

我通过在 main.js 文件的开头添加这一行来做到这一点：

import '../node_modules/semantic-ui-css/semantic.min.css'

然后，在此行之后添加：

import semantic from 'semantic'

现在你可以使用它了。

我的 Vuejs 文件中的示例：

 <div class="dimension-list-item">
  <div class="ui toggle checkbox"
    :class="{ disabled : item.disabled }">
      <input type="checkbox"
        v-model="item.selected"
        :id="item.id"
        :disabled="item.disabled">
      <label :class="{disabled : item.disabled}" :for="item.id">{{item.label}} / {{item.selected}}</label>
  </div>
</div>

此代码段为带有复选框的列表创建了一个简单的单元格。

在脚本中：

 export default {
  props: ['item'],
  ready() {
    $(this.$el.childNodes[1]).checkbox()
  }
}

这里的结果：

样本1

样品2

通常，一切都应该工作正常。

上周我刚刚开始使用 Vuejs 进行开发，所以，也许有更好的方法；-)

原文由 Yome Katsuma 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有点晚了，但现在你可以使用这个： https ://github.com/Semantic-UI-Vue/Semantic-UI-Vue 。仍然是 WIP，但它具有所有基本功能。

相当容易使用：

 import Vue form 'vue';
import SuiVue from 'semantic-ui-vue';

/* ... */

Vue.use(SuiVue);

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: '<sui-button primary>{{message}}</sui-button>'
});

API 与 React 版本非常相似：如果您使用过它，将会非常熟悉。

如果您想玩，这里有一个 JSFiddle： https ://jsfiddle.net/pvjvekce/

免责声明：我是创造者

原文由 Mario Lamacchia 发布，翻译遵循 CC BY-SA 3.0 许可协议