小编J. *_*son的帖子

我已经花了整整一周的时间寻找这个问题的答案，但没有成功。我查看了所有 StackOverflow 帖子、Google 的每一篇文章以及我能找到的每个相关的 Github 问题。大多数相关错误似乎都比较旧，所以我想知道我的问题是否由于我使用的是 macOS Big Sur 而略有不同。

问题： \n当我尝试yarn install在本地存储库中运行时，收到与 node-gyp 相关的错误以及无法找到的 python 可执行文件。这是我的终端显示的内容：

yarn install v1.22.17\n\n...other stuff\n\n[4/4]   Building fresh packages...\n[6/13] \xe2\xa0\x90 node-sass\n[2/13] \xe2\xa0\x90 node-sass\n[10/13] \xe2\xa0\x90 metrohash\n[4/13] \xe2\xa0\x90 fsevents\nerror /Users/jimmiejackson/Documents/repositories/repo-name/node_modules/metrohash: Command failed.\nExit code: 1\nCommand: node-gyp rebuild\nArguments:\nDirectory: /Users/jimmiejackson/Documents/repositories/repo-name/node_modules/metrohash\nOutput:\ngyp info it worked if it ends with ok\ngyp info using node-gyp@3.8.0\ngyp info using node@12.18.0 | darwin | x64\ngyp ERR! configure error\ngyp ERR! stack Error: Can\'t find Python executable "/usr/local/opt/python@3.9/bin/python3", you can set the PYTHON env variable.\ngyp …

我正在使用Vuetify的数据表：

<v-data-table
  :ref="`sortableTable${index}`"
  class="items-table-container"
  :headers="headers"
  :items="category.items"
  hide-default-footer>

    ...custom rows

</v-data-table>

我注意到在向表中添加新项目时，它没有出现。我确认我传递给它的物品有 11 件，但表格最多只显示 10 件。

当我看着桌子周围的包装纸时，我注意到它有：

overflow-x: auto;
overflow-y: hidden;

但是，由于某种原因，我无法覆盖它。我试过添加height道具，但似乎没有任何效果。

如何为表格提供自动高度，以便无论表格中有多少行它都会扩展？

我已经解决这个问题好几个小时了，但无法提出解决方案。我查看了其他几篇似乎相关的 StackOverflow 帖子（以及Vuetify 文档），但似乎没有任何内容对我有用。首先，我只是尝试将字体系列从默认的 Roboto 更改为 Avenir。我没有收到控制台错误或服务器错误。

@/styles/variables.scss

@import "~vuetify/src/styles/styles.sass";
$font-size-root: 14px;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.

@/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: …

我一直在努力让它工作两天。我是 Nuxt 的全新用户（尽管我已经使用 Vue 几年了），所以我只是想了解一下这一切是如何工作的。

在我的 Nuxt 项目中，我安装了 Axios 模块：

nuxt.config.js

export default {
  plugins: [
    ...
    '~/plugins/axios',
  ],
  axios: {
    baseURL: 'https://my-url.com/wp-json/wp-v2',
    https: true,
  },
}

插件/axios.js

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    $axios.setToken(env.WP_API_KEY, 'Bearer');
  });
}

在我的页面中，我尝试使用该asyncData函数从我的 WordPress API 中提取数据，如下所示：

export default {
  async asyncData(context) {
    const data = await context.$axios.$get('/media');
    console.log(data);
    return { data };
  }
}

但是，我一直收到 401 Not Authorized 错误，基本上说明我Authorization: Bearer <token>的未通过。但是，使用 Postman，我可以验证此端点确实有效并返回我需要的所有 JSON，因此问题必须出在我设置 axios 全局标头的方式上。 …

我在一个新项目中使用Vue CLI 3和Vuetify 2.1，最近又研究了重写Vuetify的SASS变量。最终使它工作后，我意识到每次修改variables.scss创建的文件并重新编译项目时，大约需要5分钟才能完成编译。我尝试更新package.json脚本来增加Node正在使用的内存，并且虽然修复了我收到的导致编译崩溃的错误，但现在编译时间非常慢。显示的进度（我正在使用Foreman同时运行我的Rails API和Vue服务器）如​​下所示：

17:47:29 web.1  | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass

如我所述，这些进度加载大约五分钟，直到它最终完成。我的猜测是，因为我更新了变量，所以必须为Vuetify node_module中的每个组件和该变量的实例更新该样式。

我的问题是是否有任何方法可以加快速度？也许我设置了导致此问题的错误信息？还是这完全正常，我只需要处理一下？

main.js

import Vue from 'vue';

import App from './App.vue';
import { router } from './router';
import store from './_store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app');

vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: { …

假设我有以下组件：

<template>
  <q-layout view="lHh lpR lFf">
    <q-page-container>
      <div class="image-container">
        Image Container
      </div>
      <slot />
    </q-page-container>
  </q-layout>
</template>

<script lang='ts' setup>
  const props = defineProps({
    image: { type: String, required: true, default: '' },
  });
  // console.log(image);
</script>

<style lang="scss" scoped>
  .image-container {
    display: none;

    @media (min-width: $breakpoint-sm-min) {
      background: v-bind("props.image") no-repeat left center fixed;
      display: block;
      background-size: cover;
      height: 100%;
      width: auto;
    }
  }
</style>

我可以验证该 prop 是否正确地作为字符串传递，并且根据文档，我可以使用它v-bind更轻松地将动态值插入到样式中。

但图像没有显示，当我打开检查器时我看到了这一点：

我也尝试过包裹v-bind内部的各种变体url()，但似乎没有任何效果。这对于 Vue3 来说还不可能吗？ …

我在一个项目中使用 Vuetify 并创建就地编辑体验。在范围和文本字段之间切换有效，并且它正确地将更新发送到我的服务器。最后一件事是，在我可以称此功能完成之前，我需要确定输入的原始值是否已从新值更改，以便我在不需要时不会发布到我的服务器。

<span
  v-if="editableCategory !== `category${category.id}Ref`"
  class="category-header"
  @click="setCategoryEditing(`category${category.id}Ref`)">
  <h4>{{ category.name }}</h4>
  <v-icon small>
    edit
  </v-icon>
</span>

<v-text-field
  v-else
  :ref="`category${category.id}Ref`"
  :value="category.name"
  color="primary"
  dense
  hide-details
  type="text"
  outlined
  @blur="updateCategory(category, $event)"
  @change="updateCategory(category, $event)" />

问题是，当我控制台记录 时$event，在测试@change和 时我得到两个不同的响应@blur。这@blur似乎给了我正常的、完整的事件对象，然后我就能够正确比较旧值和新值。然而，该@change事件只是给了我一个新值的字符串。

这是 Vuetify v-text-field 事件未正确触发的问题@change（因此我应该与它们创建一个 Github 问题？），还是我完全误解了模糊/更改事件（也是另一个非常现实的可能性）？

我有一个相当定制的 Vuetify 数据表，我正在使用，因为我用自定义变体覆盖了几列：

<v-data-table
    :headers="headers"
    :items="category.items"
    hide-default-footer
    show-select
    single-select
    sort-by="position"
    sort-desc>
    <template v-slot:item.data-table-select="{ item }">
        <v-icon
            class="handle grab">
            mdi-drag-vertical
        </v-icon>
    </template>

    <!-- Type Edit In Place -->
    <template v-slot:item.generic_type="{ item }">
        <span
            v-if="editableItem !== `type${item.id}Ref`"
            @click="setEditing(`type${item.id}Ref`);">
            {{ item.generic_type }}
        </span>
        <v-text-field
            v-else
            :ref="`type${item.id}Ref`"
            :value="item.generic_type"
            color="primary"
            dense
            hide-details
            type="text"
            outlined
            @blur="updateItem($event.target.value, item, 'generic_type')"
            @change="updateItem($event, item, 'generic_type')" />
    </template>

    // Several others similar to the input above //

</v-data-table>

现在虽然我正在尝试实现 SortableJS，但我需要能够向数据表的每一行添加一个自定义数据属性，以便我稍后可以在我的 Sortable 函数中引用它。

根据Vuetify 文档，Some slots will override each …

在文档和其他SO问题中,我一直在高低搜索答案.

我createMuiTheme在单独的JS文件中使用该选项来覆盖某些默认样式,但我很难理解该overrides选项的工作原理.

目前我的按钮看起来像这样: 我得到的代码看起来像这样:

const theme = createMuiTheme({
    ...other code,
    overrides: {
    MuiFormControlLabel: {
        focused: {
            color: '#4A90E2'
        }
    },
    MuiOutlinedInput: {
        focused: {
                border: '1px solid #4A90E2'
        },
        notchedOutline: {
            border: '1px solid #4A90E2'
        },
    },
    MuiFormLabel: {
        focused: {
            color: '1px solid #4A90E2'
        }
    }
}
)};

然后在我的组件中,我正在使用它:

import theme from './styles/ThemeStyles';
import { withStyles } from '@material-ui/core/styles';

class SignInForm extends Component {
render() {
    const { classes } = this.props;
    <form className={classes.container} noValidate …

我遇到了一个非常烦人的问题，某种设置冲突阻止了 lint 调整文件。我正在使用Wes Bos 的 ESLint/Prettier 配置。例如，我有一个 Vue 文件：

<script>
import { mapState, mapActions } from "vuex";

export default {
  data: () => ({
    valid: false           <-------- Also receive eslint(comma-dangle) error here
  }),
  computed: {
    ...mapState("account", ["status"]),
  },
  methods: {
    ...mapActions("account", ["login", "logout"]),
  },
  created() {}
};
</script>

但是在我的 .eslintrc 中，我有这个规则，因为我更喜欢将脚本代码缩进一次：

"vue/script-indent": [
  "warn",
  2,
  {
    "baseIndent": 1
  }
],

当我保存文件以允许 Prettier 重新格式化并修复这些错误时，我可以看到逗号悬挂和缩进问题在它们恢复并再次显示所有错误之前修复了一瞬间。冲突发生在哪里？

ESLint/Prettier 对我来说很新，我只是想建立一个好的系统！任何帮助将不胜感激。

其他相关文件：

VSCode 设置.json

{
    "breadcrumbs.enabled": true,

    "editor.autoClosingBrackets": "always",
    "editor.autoClosingQuotes": "always",
    "editor.formatOnPaste": true,
    "editor.formatOnType": …