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

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

但有一个问题：

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（帕格），但仍然没有运气

github中有关于该库的评论：

在制品，不要使用（）

我在模板中成功导入了语义css，如下所示：

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

但这里的问题是，我不能使用semantic.js函数，比如dimmer和其他东西

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

在我的vue.js项目中是否有优雅的方式包含语义UI？

1）如果没有安装jQuery（正确！），请安装它：

• npm安装--保存jquery

• 然后在您的webpack.config文件中（我刚刚在webpack.dev.config.js中添加了它，但可能会在prod-config文件中添加它）：
  在插件中添加一个

  新网页包。ProvidePlugin

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

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

好的是，对于您想要使用的所有外部库（数字、时刻等），这都是相同的过程，当然还有语义ui

我们走吧：

• npm安装--保存语义ui css

注意：您可以使用主repo（即语义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:您可以将其他外部LIB别名放在那里：

// 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=）所做的那样

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插件的语义ui！）

现在，最后一件事要做：

• 添加语义css：
  为此，我在main.js文件的开头添加了这一行：

  import'../node\u模块/semantic ui css/semantic.min.css'

然后，在此行之后添加：

从“语义”导入语义

现在你可以使用它了

我的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>

结果如下：

正常情况下，一切正常

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

安装jquery

npm安装jquery

安装语义ui css

npm安装语义ui css

将此添加到main.js中

window.$=window.jQuery=require（'jQuery'））
require（'semantic-ui-css/semantic.css'）
require（'semantic-ui-css/semantic.js'）

有点晚，但现在您可以使用它：。仍然是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>'
});

从“Vue”导入Vue；
从“语义ui vue”导入SuiVue；
/* ... */
Vue.use（SuiVue）；
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
},
模板：“{message}}”
});

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

如果您想玩，这里有一个JSFIDLE：

---

免责声明：我是创造者

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

• 将cd刻录到vue项目目录，然后执行以下操作：

1-安装压缩空气：

npm install -g gulp

2-运行以下命令并按照安装说明进行操作

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

3-执行之前的命令后，您的“语义”文件夹中应该有一个“dist”文件夹。将此文件夹移动到位于项目根目录下的“/静态”文件夹

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>

如果发生这种情况，除了您的按钮之外，其他所有功能都正常工作。请确保将此

.ui表单添加到您的表单中。
ProvidePlugin和semantic ui的别名不应该同名吗？无论如何，语义ui在这里作为一个空对象导入。它不起作用。好吧，语义ui js文件在这里作为一个空对象返回。建议？您仍然需要进一步设置以使语义ui字体正常工作。对于vue@2.x，您将不得不使用我这里有一个天真的问题：您在示例中所做的是“装载”DOM元素，然后将语义ui JS逻辑附加到它。在处理基于虚拟DOM的LIB（如React和Vue）时，这不是一种完全的反模式吗？永远不要操纵DOM，因为它与虚拟DOM不同步？异常消失了，但我发现所有语义ui的js都不工作，例如，我的页面中有一个菜单，我可以看到css效果，但当我尝试单击某些项目时，什么都没有发生我已经看到了，是的，它确实具有所有基本功能，但它实际上只是基本的功能，如此之多以至于在我看来几乎不值得付出努力。
npm install semantic-ui --save
cd semantic/
gulp build

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