Vue Material CSS显示错误

时间:2017-06-21 01:02:20

标签: vue.js vuejs2 vue-component vue-material

我开始使用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>

我正在使用早午餐在服务器上呈现它。谢谢你的时间!

编辑:我将留下一个显示它如何显示的图像

Looks bad

编辑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及其所有内容,但仍无法正常工作

0 个答案:

没有答案