我开始使用Vue,我在显示材质组件的CSS时遇到了一些问题。即使它们出现在最终的html渲染中,它们也无法识别所有类。
这是我的main.js
import Vue from 'vue/dist/vue.js';
import VueRouter from 'vue-router';
import VueMaterial from 'vue-material';
Vue.use(VueRouter);
Vue.use(VueMaterial);
import 'dependency_manifest';
import App from 'components/app.vue';
const router = new VueRouter({
mode: 'history',
routes: [{
name: 'carListings.index',
path: '/avisos',
component: {template: '<p>Listado</p>'}
}, {
name: 'carListings.show',
path: '/avisos/:id',
component: {template: '<p>Detalle</p>'}
}]
});
Vue.material.registerTheme({
default: {
primary: 'blue',
accent: 'red'
},
green: {
primary: 'green',
accent: 'pink'
},
orange: {
primary: 'orange',
accent: 'green'
},
});
new Vue({
router,
render: h => h(App),
saveScrollPosition: true
})
.$mount('#app-wrapper');
这是我的app.vue
<template>
<div>
<md-toolbar>
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">Default</h2>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>
</md-button>
</md-toolbar>
</div>
</template>
<script>
export default {
}
</script>
我正在使用早午餐在服务器上呈现它。谢谢你的时间!
编辑:我将留下一个显示它如何显示的图像
编辑2:我试图在不同的地方添加CSS。首先在main.js上,但控制台显示此错误:Uncaught Error: Cannot find module 'vue-material/dist/vue-material.css' from 'main.js'
import 'vue-material/dist/vue-material.css';
这会在我的vendor.css上添加所有.css,但不起作用 然后我试着在这里添加一个cdn:index.static.jade
html
head
title Frontend developer test app
body
#app-wrapper
script(src='/vendor.js')
script(src='/app.js')
link(href='https://unpkg.com/vue-material@0.7.2/dist/vue-material.css')
link(href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic', rel='stylesheet')
link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
此外,我试图在这里添加vendor.css及其所有内容,但仍无法正常工作