web-dev-qa-db-ja.com

セマンティックUIでvue.jsを使用する

Vue.jsでwebpack + Semantic UIを使用しようとしていますが、このライブラリが見つかりました 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）をインストールしましたが、まだ運がありません。

そして、そのlibのgithubにコメントがあります：

WIP、使用しないでください（ https://github.com/vueui/vue-ui ）

次のように、テンプレートにセマンティックcssをインポートできました。

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

しかし、ここでの問題は、調光器やその他のもののような、semantic.js関数を使用できないことです。

問題は、セマンティックで記述された古いコードベースがすでにあることです。他のcssフレームワーク（ブートストラップまたはマテリアライズ）を使用しないことは良いことです。

vue.jsプロジェクトにセマンティックUIを含めるエレガントな方法はありますか？

javascriptwebpacksingle-page-applicationvue.jssemantic-ui
27
T0plomj3r

1）jQueryがインストールされていない場合はインストールします（正しく！）：

  • npm install --save jquery

  • 次に、webpack.configファイルに（webpack.dev.config.jsに追加しました、しかし、おそらくprod configファイルに追加してください）：

    プラグインにnew webpack.ProvidePluginを追加します

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

    JQueryは、すべてのアプリケーションとコンポーネントで使用できるようになりました。

良いことは、これがあなたが使用したいすべての外部ライブラリ（数字、モーメントなど）と同じプロセスであり、もちろんセマンティックUIだということです！

行こう ：

  • npm install --save semantic-ui-css

nb：メインリポジトリ（つまり、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：ここではいくつかの名前を使用していますが、多分semanticだけで十分です;-)

繰り返しますが、そこにlib/aliasを追加できます：

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プラグインです-セマンティック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()
  }
}

ここで結果：

sample1

sample2

通常、すべて正常に動作するはずです。

私は先週Vuejsで開発を始めたばかりなので、もっと良い方法があるかもしれません;-)

34
Yome Katsuma

少し遅れましたが、これを使用できるようになりました： 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/

免責事項：私は作成者です

5
Mario Lamacchia

これは私がそれを行う方法です：（注：私はプロジェクトを作成するためにvue-cliを使用します）

  • vueプロジェクトディレクトリにcdし、以下を実行します。

1- gulpのインストール：

npm install -g gulp

2-次のコマンドを実行し、インストールの指示に従います。

npm install semantic-ui --save
cd semantic/
gulp build

3-前のコマンドを実行した後、「セマンティック」フォルダー内に「dist」フォルダーが必要です。このフォルダーをプロジェクトのルートにある「/ static」フォルダーに移動します。

4- htmlテンプレートファイルに次の行を含めます。

<link rel="stylesheet" type="text/css" href="/static/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="/static/dist/semantic.js"></script>
2
Benjamin Rodriguez
  1. Jquery _npm install jquery_をインストールします
  2. セマンティックUIのインストール_npm install semantic-ui-css_
  3. これをmain.jsに追加します

window.$ = window.jQuery = require('jquery') require('semantic-ui-css/semantic.css') require('semantic-ui-css/semantic.js')

0
Sanyam Jain

それが起こった場合、他のすべては機能していますが、ボタンは必ずこの.ui formをフォームに追加します。

0
Thomas Chirwa