我用纱安装了uikit。
yarn add uikit
另外还有less-loader
,less
和css-loader
,因为this site这么说。
现在,我尝试像这样在App.vue中使用UIkit。
<template>
<div id="app">
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>This is a text!</p>
</div>
<table class="uk-table uk-table-striped">
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
</table>
</div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
mounted: function() {
this.getTestJson();
},
methods: {
getTestJson: function() {
this.$http.get('http://localhost:8090/test').then((res) => {
console.log(res.body)
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这还不够,UIkit组件无法正确显示。我还需要做什么?
我必须使用vuikit吗?
答案 0 :(得分:0)
此link会有所帮助,基本上,您需要执行以下操作:
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
</style>
import uk from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
uk.use(Icons)
this.uk.toggle('#toggle-elm').toggle()
:Vue.mixin({
data: function () {
return {
get uk () {
return uk
}
}
}
})
new Vue({
el: '#app',
...