在语义UI上使用vue.js

我正在尝试将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.

所以我安装了玉(pug),但是还是没有运气。

github中有关于该lib的评论:

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

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

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

但是这里的问题是我不能使用dimmer之类的semantic.js函数。

事实是,我已经有一些用语义编写的旧代码库,最好不要使用任何其他CSS框架(引导程序或实现)。

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

神无小哥2020/03/12 15:21:04

这就是我的方法:( 注意:我使用vue-cli创建我的项目)

  • cd到您的vue项目目录,然后执行以下操作:

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>
Green小小古一2020/03/12 15:21:04

如果发生这种情况,其他所有功能都可以正常工作,但是您必须确保将其添加.ui form到表单中。