Javascript 使用带有语义 UI 的 vue.js
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/36676215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using vue.js with semantic UI
提问by T0plomj3r
I'm trying to use webpack + Semantic UI with Vue.js and I found this library https://vueui.github.io/
我正在尝试在 Vue.js 中使用 webpack + Semantic UI,我发现这个库https://vueui.github.io/
But there was problem compling:
但是编译出现问题:
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.
So I installed jade(pug) but still no luck.
所以我安装了 jade(pug) 但仍然没有运气。
And there's comment in github for that lib:
并且在 github 中有对该库的评论:
WIP, do not use( https://github.com/vueui/vue-ui)
WIP,请勿使用(https://github.com/vueui/vue-ui)
I've managed to import semantic css in my templates like this:
我已经设法在我的模板中导入语义 css,如下所示:
@import './assets/libs/semantic/dist/semantic.min.css';
But problem here is that I can't use semantic.js functions like dimmer and other stuff.
但这里的问题是我不能使用如 dimmer 和其他东西的 semantic.js 函数。
The thing is that I already have some old codebase written with semantic and it would be good not to use any other css framework (bootstrap or materialize).
问题是我已经有一些用语义编写的旧代码库,最好不要使用任何其他 css 框架(引导程序或物化)。
Is there any elegant way to include semantic UI in my vue.js project?
有没有什么优雅的方法可以在我的 vue.js 项目中包含语义 UI?
回答by Yome Katsuma
1) Install jQuery if it's not installed (properly!):
1) 如果未安装 jQuery,请安装它(正确!):
npm install --save jquery
then in your webpack.configfile (I just added it in webpack.dev.config.js, but maybe add it in the prod config file):
in the plugins add a
new webpack.ProvidePlugin
new webpack.ProvidePlugin({ // jquery $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
Now jQuery is available for ALL the application and components.
npm install --save jquery
然后在你的webpack.config文件中(我只是在webpack.dev.config.js 中添加了它,但可能将它添加到 prod 配置文件中):
在插件中添加一个
new webpack.ProvidePlugin
new webpack.ProvidePlugin({ // jquery $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
现在 jQuery 可用于所有应用程序和组件。
The good thing is this is now the same process for ALL your external libraries you want to use (Numeral, Moment, etc..), and of course semantic-ui!
好消息是,对于您要使用的所有外部库(Numeral、Moment 等),当然还有语义 ui,这现在是相同的过程!
Let's go :
我们走吧 :
npm install --save semantic-ui-css
npm install --save semantic-ui-css
nb : you can use the main repo (i.e. semantic-ui) but semantic-ui-css is the basis theme for semantic-ui.
注意:您可以使用主存储库(即语义用户界面),但语义用户界面 CSS 是语义用户界面的基础主题。
So, now, you have to, firstly, define Aliases in the webpack.base.config.jsfile :
所以,现在,你必须首先在webpack.base.config.js文件中定义别名:
under resolve.alias
add the alias for semantic:
在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 :you can put there your other external libs aliases :
注意:您可以将其他外部库别名放在那里:
// 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 :use your own path there (normally they should look like those ones !)
注意:在那里使用您自己的路径(通常它们应该看起来像那些路径!)
...we are about to finish...
......我们即将结束......
Next step is to add alias reference to the plugin provider, like we just do for jQuery =)
下一步是向插件提供程序添加别名引用,就像我们刚刚为 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: here I use several names, maybe semanticis only sufficient ;-)
注意:这里我使用了几个名字,也许语义就足够了;-)
Again, you can add your lib/alias there :
同样,您可以在那里添加您的库/别名:
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'
})
Here are all the external libs I'm using in my own project (you can see gridster, which is a jQuery plugin - like semantic-ui is !)
这是我在自己的项目中使用的所有外部库(您可以看到 gridster,它是一个 jQuery 插件 - 就像语义 UI 一样!)
So now, just one last thing to do :
所以现在,只有最后一件事要做:
add semantic css :
I do this by adding this line at the beginning of the main.jsfile :
import '../node_modules/semantic-ui-css/semantic.min.css'
添加语义css:
我通过在main.js文件的开头添加这一行来做到这一点:
import '../node_modules/semantic-ui-css/semantic.min.css'
Then, after this line add :
然后,在此行之后添加:
import semantic from 'semantic'
import semantic from 'semantic'
Now you can use it.
现在你可以使用它了。
Example in my Vuejs file:
我的 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>
This snippet create a simple cell for a list with a checkbox.
此代码段为带有复选框的列表创建一个简单的单元格。
And in script :
在脚本中:
export default {
props: ['item'],
ready() {
$(this.$el.childNodes[1]).checkbox()
}
}
Here the result :
结果如下:
Normally, all should works fine.
通常,一切都应该正常工作。
I have just started to develop with Vuejs last week, so, maybe there is a better way to to that ;-)
我上周刚刚开始使用 Vuejs 进行开发,所以,也许有更好的方法来解决这个问题;-)
回答by Mario Lamacchia
A bit late, but now you can use this: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue. Still WIP but it has all the basic functionalities.
有点晚了,但现在你可以使用这个:https: //github.com/Semantic-UI-Vue/Semantic-UI-Vue。仍然是 WIP,但它具有所有基本功能。
Pretty easy to use:
非常容易使用:
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>'
});
The APIs are very similar to the React version: if you used it, this will be very familiar.
这些 API 与 React 版本非常相似:如果您使用过它,就会非常熟悉。
Here is a JSFiddle if you want to play around: https://jsfiddle.net/pvjvekce/
如果你想玩,这里有一个 JSFiddle:https://jsfiddle.net/pvjvekce/
Disclaimer: I am the creator
免责声明:我是创作者
回答by Benjamin Rodriguez
This is the way that I do it: (note: I use vue-cli to create my projects)
这是我做的方式:( 注意:我使用 vue-cli 创建我的项目)
- cd to your vue project directory and do the following:
- cd 到您的 vue 项目目录并执行以下操作:
1- install gulp:
1-安装吞咽:
npm install -g gulp
2- Run the following commands and follow the instructions of the installation.
2- 运行以下命令并按照安装说明进行操作。
npm install semantic-ui --save
cd semantic/
gulp build
3- After executing the previous commands you should have a "dist" folder inside your "semantic" folder. Move this folder to the "/static" folder located at the root of the project.
3- 执行前面的命令后,您的“语义”文件夹中应该有一个“dist”文件夹。将此文件夹移动到位于项目根目录的“/static”文件夹。
4- Include the following lines in your html template file:
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>
回答by Thomas Chirwa
If it happens everything else is working but your buttons make sure to add this .ui form
to your form.
如果发生这种情况,其他一切都可以正常工作,但您的按钮确保将其添加.ui form
到您的表单中。
回答by Sanyam Jain
- Install jquery
npm install jquery
- Install semantic-ui-css
npm install semantic-ui-css
- Add this in main.js
- 安装 jquery
npm install jquery
- 安装semantic-ui-css
npm install semantic-ui-css
- 在 main.js 中添加这个
window.$ = window.jQuery = require('jquery')
require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')
window.$ = window.jQuery = require('jquery')
require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')