在语义UI上使用vue.js

JavaScript

小小卡卡西小卤蛋

2020-03-12

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

第1047篇《在语义UI上使用vue.js》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
神无小哥 2020.03.12

这就是我的方法：（ 注意：我使用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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android