1

我从 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 及其所有内容，但仍然无法正常工作

4

0 回答 0