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

Question

我正在尝试使用Webpack + Semantic 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.

所以我安装了玉(哈巴狗),但仍然没有运气.

并且在github上有关于该lib的评论:

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

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

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

但问题是我不能使用像dimmer和其他东西这样的semantic.js函数.

问题是我已经有了一些用语义编写的旧代码库,不使用任何其他css框架(bootstrap或materialize)会很好.

有没有优雅的方法在我的vue.js项目中包含语义UI？

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可用于所有应用程序和组件.

好处是,现在对于您想要使用的所有外部库(数字,时刻等)都是相同的过程,当然还有语义 - ui!

我们走吧 :

• npm install --save semantic-ui-css

nb:你可以使用主要的repo(即semantic-ui),但是semantic-ui-css是semantic-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:这里我使用了几个名字,也许语义只够;-)

同样,您可以在那里添加您的lib /别名:

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插件 - 就像语义一样!)

所以现在,最后要做的就是:

• 添加语义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()
  }
}

结果如下:

SAMPLE1

SAMPLE2

通常,一切都应该正常.

我上周刚开始与Vuejs一起开发,所以,也许有更好的方法来实现这一点;-)

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/

免责声明：我是创作者