将 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.

所以我安装了 jade(pug) 但还是不行。

github 中有关于该库的评论：

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

我已经成功地在我的模板中导入语义 css，如下所示：

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

但这里的问题是我无法使用 semantic.js 调光器等功能。

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

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

Answer 1

1) 安装 jQuery 如果没有安装（正确！）：

npm install --save jquery
然后在你的webpack.config文件中（我刚把它添加到webpack.dev.config.js , 但也许将其添加到产品配置文件中):

在插件中添加一个new webpack.ProvidePlugin
```
new webpack.ProvidePlugin({
    // jquery
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
})
```
现在 jQuery 可用于所有应用程序和组件。

好消息是，现在对于您要使用的所有外部库（Numeral、Moment 等）都是相同的过程，当然还有语义-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 插件 - 就像 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()
  }
}

这里是结果：

sample1

sample2

正常情况下，一切正常。

I have just started to develop with Vuejs last week, so, maybe there is a better way to to that ;-)

Answer 2

安装jquerynpm install jquery
安装语义-ui-cssnpm install semantic-ui-css
将此添加到 main.js

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

Answer 3

有点晚了，但现在你可以使用这个了：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/

免责声明：我是创作者

Answer 4

我是这样做的： （注意：我使用vue-cli创建我的项目）

cd 到您的 vue 项目目录并执行以下操作：

1- 安装 gulp:

npm install -g gulp

2-运行以下命令并按照说明安装。

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

3- 执行前面的命令后，您的 "semantic" 文件夹中应该有一个 "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>

Answer 5

如果发生这种情况，其他一切正常，但您的按钮确保将此 .ui form 添加到您的表单中。

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

Using vue.js with semantic UI

javascript

single-page-application

semantic-ui

webpack

vue.js