不使用 npm 或 webpack 时未应用 Vuetify 主题

Question

我尝试构建一个 Vue 和 Vuetify 解决方案（也使用 httpVueLoader）来获得一个 Vue 解决方案，但不使用 npm 或类似的东西（只是老式包含 javascript 文件）。我使用简单的登录表单布局来测试设置它们的颜色，但是失败了。

Login.html 文件:

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="login">
    <login></login>     
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="lib/httpVueLoader.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>  
  <script src="src/login.js"></script>  
</body>
</html>

Login.js 文件

Vue.use(Vuetify, {
  theme: {
    primary: "#4CAF50",
    secondary: "#2E7D32",
    accent: "#FF4081",
    error: "#f44336",
    warning: "#FFA726",
    info: "#2196f3",
    success: "#4caf50"
  }
})

new Vue({    
  el: '#login',
  components: {
      'login': httpVueLoader('src/Login.vue')
  }
})

Login.vue 文件

<template>
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-5">
              <v-toolbar color="primary">
                <v-toolbar-title>Member login</v-toolbar-title>
                <v-spacer></v-spacer>                
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" name="email" label="email" type="text"></v-text-field>
                  <v-text-field id="password" prepend-icon="lock" name="password" label="Password" type="password"></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
module.exports = {
  name: 'login',
  data: function() {
    return {      
    }
  }
}
</script>

<style lang="css">
</style>

这显示了正确的页面，但是没有调整颜色（我的主题中的主要颜色是绿色）。有人知道我在这里做错了什么吗？

Answer 1

您使用的是 Vuetify css 的缩小版，传入自定义主题值将无效。您需要使用手写笔版本并自己构建 css 文件。

修改手写笔变量的指南使用 webpack，因此您需要遵循该指南或找到另一种方法将您的主题编译到 css 文件中。

见Modifying Stylus Variables

Answer 2

我遇到了同样的问题。注意到我应该编辑我使用的地方 Vue.use（验证）

如果我在此之后添加任何内容，它不会受到影响。但是用带有参数的 Vue.use(Vuetify) 替换普通的 Vue.use(Vuetify) 将修复它。

与 RTL 相同

有效

Vue.use(Vuetify, {
  rtl: true
})

不起作用

Vue.use(Vuetify)

Vue.use(Vuetify, {
  rtl: true
})

Answer 3

像你一样，我运行在不使用 npm 或 webpack 的情况下参与其中。我能够通过在我的主要 Vue 组件的已安装属性中的函数中设置它们来使主题覆盖工作，如下所示：

    var app = new Vue({
        el: '#app',
        watch: {},
        mounted: function() {
            this.$vuetify.theme.primary = '#1b5632';
            this.$vuetify.theme.secondary = '#6AAB84';
        },
        data: {
            domain: 'Sample',
            title: 'Login',
            username: ''
        },
        methods: {},
        router
    })

Answer 4

Vuetify 主题，这对我来说适用于明暗模式： \plugins\vuetify.js 添加这个


    export default new Vuetify({
      icons: {
        iconfont: 'mdi',
      },
      theme: {
        themes: {
          light: {
            primary: "#ffcc50",
            error: "#ff8888",
            success: "#45a5ae",

            secondary: '#b0bec5',
            accent: '#8c9eff',
          },
          dark: {
            primary: "#ffcc50",
            error: "#ff8888",
            success: "#45a5ae",

            secondary: '#b0bec5',
            accent: '#8c9eff',

          },
        },
      },

    });

不使用 npm 或 webpack 时未应用 Vuetify 主题

Vuetify theme not applied, when not using npm or webpack

vue.js

vuejs2

vuetify.js