在 SAFE 网络上使用 mdbvue,缺少样式
Using mdbvue on the SAFE Network, missing style
我关注了this tutorial
更重要的是,本教程:https://mdbootstrap.com/vue/components/buttons/
我最终得到了这个:
所以我显然在这里缺少风格。
我是 vue 的新手,也是 nodejs 的新手,所以我对样式应该包含在何处以及如何包含一无所知。
这是我的代码:
App.vue
<template>
<div :class="$style.App">
<ButtonPage />
</div>
</template>
<script>
import ButtonPage from './components/ButtonPage.vue'
const safenetwork = require('./safenetwork.js');
export default {
name: 'App',
components: {
ButtonPage
},
async created() {
await safenetwork.authoriseAndConnect();
}
}
</script>
ButtonPage.vue
<template>
<btn outline="primary" size="lg">Button</btn>
</template>
<script>
import { Btn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
Btn
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
package.json
{
"name": "Site-Yropeen",
"version": "1.0.0",
"description": "Yropeên",
"homepage": "https://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen",
"keywords": [
"conlang",
"European"
],
"author": "Folât Sômêjpjêr <folatt@guilder-test.eu.org>",
"contributors": [],
"license": "GPL-3.0+",
"main": "index.js",
"scripts": {
"build": "neutrino build",
"start": "neutrino start"
},
"repository": {
"type": "git",
"url": "git://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen/Site-Yropeen.git"
},
"dependencies": {
"@babel/helper-module-imports": "v7.0.0-beta.51",
"mdbvue": "4.*.*",
"vue": "2.*.*",
"vue-router": "3.*.*"
},
"devDependencies": {
"@neutrinojs/vue": "8.*.*",
"babel-plugin-transform-runtime": "6.*.*",
"babel-preset-stage-2": "6.*.*",
"jquery": "3.*.*",
"neutrino": "8.*.*",
"webpack": "3.*.*"
}
}
package.json
...
"dependencies": {
"mdbootstrap": "~4.5.0"
},
...
我关注了this tutorial
更重要的是,本教程:https://mdbootstrap.com/vue/components/buttons/
我最终得到了这个:
所以我显然在这里缺少风格。 我是 vue 的新手,也是 nodejs 的新手,所以我对样式应该包含在何处以及如何包含一无所知。
这是我的代码:
App.vue
<template>
<div :class="$style.App">
<ButtonPage />
</div>
</template>
<script>
import ButtonPage from './components/ButtonPage.vue'
const safenetwork = require('./safenetwork.js');
export default {
name: 'App',
components: {
ButtonPage
},
async created() {
await safenetwork.authoriseAndConnect();
}
}
</script>
ButtonPage.vue
<template>
<btn outline="primary" size="lg">Button</btn>
</template>
<script>
import { Btn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
Btn
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
package.json
{
"name": "Site-Yropeen",
"version": "1.0.0",
"description": "Yropeên",
"homepage": "https://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen",
"keywords": [
"conlang",
"European"
],
"author": "Folât Sômêjpjêr <folatt@guilder-test.eu.org>",
"contributors": [],
"license": "GPL-3.0+",
"main": "index.js",
"scripts": {
"build": "neutrino build",
"start": "neutrino start"
},
"repository": {
"type": "git",
"url": "git://gitlab.com/UniversalBasics/Yropeen/Site-Yropeen/Site-Yropeen.git"
},
"dependencies": {
"@babel/helper-module-imports": "v7.0.0-beta.51",
"mdbvue": "4.*.*",
"vue": "2.*.*",
"vue-router": "3.*.*"
},
"devDependencies": {
"@neutrinojs/vue": "8.*.*",
"babel-plugin-transform-runtime": "6.*.*",
"babel-preset-stage-2": "6.*.*",
"jquery": "3.*.*",
"neutrino": "8.*.*",
"webpack": "3.*.*"
}
}
package.json
...
"dependencies": {
"mdbootstrap": "~4.5.0"
},
...