小编Phi*_*x94的帖子

我正在尝试为我的开发和生产环境设置一个基本 urlvitejs ，但配置未解析。

根据vitejs，您可以在配置选项中设置在开发或生产中提供服务时的基本公共路径。

当从命令行运行 vite 时，Vite 会自动尝试解析项目根目录中名为 vite.config.js 的配置文件。

问题是我的应用程序请求没有通过'http://localhost:8080/'，但仍然附加到默认服务端口http://localhost:3000/。

我当前的配置如下：

// vite.config.js
export default {
  base: 'http://localhost:8080/'
}

// packages.json
{
  "name": "vue3ui",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    ...,
    "vue": "^3.0.11"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "vite": "^1.0.0-rc.13"
  }
}

我正在按照Pixi 教程在 VueJS 组件内学习 PixiJS ，控制台显示此错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: 渲染错误：“TypeError: 将循环结构转换为 JSON

<template>
  <div>
    {{ displayPixi() }}
  </div>
</template>

<script>
  import * as PIXI from 'pixi.js'

  export default {
    name: 'HelloWorld',

    methods: {
      displayPixi() {
        return new PIXI.Application({width: 256, height: 256})
      }
    }
  }
</script>

如何在 VueJS 中加载 Pixi 实例？

Vuetify 有一个迷你图组件，可用于创建简单的图表。 https://vuetifyjs.com/en/components/sparklines

我不知道如何在同一张图表中添加多个迷你图。比如向组件添加第二个值列表。

如果没有办法，也许你们中的一些人知道我可以与 Vue 一起使用的更合适的图形工具。

<template>
  <v-sparkline
    :value="value"
    :gradient="gradient"
    :smooth="radius || false"
    :padding="padding"
    :line-width="width"
    :stroke-linecap="lineCap"
    :gradient-direction="gradientDirection"
    :fill="fill"
    :type="type"
    :auto-line-width="autoLineWidth"
    auto-draw
  ></v-sparkline>
</template>

<script>
  const gradients = [
    ['#222'],
    ['#42b3f4'],
    ['red', 'orange', 'yellow'],
    ['purple', 'violet'],
    ['#00c6ff', '#F0F', '#FF0'],
    ['#f72047', '#ffd200', '#1feaea'],
  ]

  export default {
    data: () => ({
      width: 2,
      radius: 10,
      padding: 8,
      lineCap: 'round',
      gradient: gradients[5],
      value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
      gradientDirection: 'top',
      gradients,
      fill: …

我试图显示一个具有特定行为的 Vuetify 日期范围选择器，其中用户只能选择日历上的开始日期。

该范围有固定的持续时间。所以如果这个持续时间设置为4天，当你点击11月4日时，它会显示从4日到8日的范围。

是否可以覆盖 v-date-picker 组件来实现此目的？我可以为日期选择器提供一个预先确定的范围，但是一旦单击该组件，该范围就会重置。

<v-date-picker class="mt-3 mb-6" v-model="range"
               range>
</v-date-picker>

range: [moment().format('YYYY-MM-DD'), moment().add(4, 'days').format('YYYY-MM-DD')]

我在 Vuejs 上迁移到 moment 时遇到问题。

运行npm install vue-moment并添加到我的脚本后：

<script>

  const moment = require('vue-moment');
...
</script>

我将此添加到我的<template>：

<h1>{{moment('2017-12-20 11:00').fromNow()}}</h1>

我得到这个错误：

[Vue 警告]：渲染错误：“TypeError: _vm.moment is not a function”

我想通过使用限制 v-chip 的宽度，text-overflow: ellipsis但 Vuetify 似乎v-chip无法识别它。

我想避免这个问题：

<v-chip-group
             v-model="selected"
             mandatory
             column
             active-class="primary--text"
        >
            <v-chip v-for="(item, i) in recipes" :key="i"
                    class="chip-overflow"
                    @click:close="deleteListedRecipe(item)"
                    close>
                {{ item.name }}
            </v-chip>
        </v-chip-group>

    .chip-overflow {
        max-width: 150px;
        padding: 2px 5px;
        display:block;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

我一直是 vuetify <v-tooltip>，但在他们的 API 中没有找到任何属性，因此我可以在工具提示模板中使用\n或<br />创建换行符。

示例：

    <v-tooltip>
      <template v-slot:activator="{ on }">
        <v-btn>
          button
        </v-btn>
      </template>
      <span>First line \n second line</span>
    </v-tooltip>

这仍然会显示

First line second line

代替

First line 
second line

使用 vuetify，我试图设置<v-pagination>一个，<v-list-item>但我不知道如何将我的项目（通知中的 n）绑定到分页。它需要额外的功能吗？我发现的大部分文档都与 vuetify 表有关。

<template>
  <div>
    <v-card
         class="mx-auto"
         max-width="300"
         tile
    >
      <v-list rounded>
        <v-subheader>NOTIFICATIONS</v-subheader>
        <v-list-item-group color="primary">
          <v-list-item
               v-for="(n, i) in notification"
               :key="i"
          >
            <v-list-item-content>
              <v-list-item-title v-text="n.payload"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-pagination
               v-if="pages > 1"
               v-model="pagination.page"
               :length="pages"
          ></v-pagination>
        </v-list-item-group>
      </v-list>
    </v-card>
  </div>
</template>

<script>
    export default {
        name: "status",

      data() {
        return {
          pagination: {
              page: 1,
              total: 0,
              perPage: 0,
              visible: 3
          },
          notification: [],
        }
      },
      computed: {
        pages () {
            Math.ceil(this.notification.length / 3)
        }
      } …

我在这个问题上花了很多时间，我不明白为什么我的 CSSposition: sticky不能在我的模板中工作。

我的大部分应用程序都是使用 vuetify 构建的。我不知道这是否会干扰 CSS position: sticky，但即使组件到达该位置，我也不会粘住。

<template>
    <v-sheet>
        <v-row>
            <v-col cols="2">
                <div class="side-panel">
                    <list_component class="side-panel-list"/>
                </div>
            </v-col>
            <v-col cols="10" class="pt-0 pb-0">
                <recipe_create_component/>
            </v-col>
        </v-row>
    </v-sheet>
</template>

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

    export default {
        name: "production_tool_dashboard",
        extends: abstract,
        computed: {
            ...mapState({
                ...
            })
        },
        components: {
            ...
        },
        data() {
           ...
        }
    }
</script>

<style scoped>
    .side-panel-list {
        height: 100%;
    }
    .side-panel {
        top: 0;
        position: sticky;
        position: -webkit-sticky;
        z-index: 1;
        min-width: 240px;
        max-width: …

Vuetifyv-icon通常采用类的颜色。就我而言，menu-icon当我的路由器链接处于活动状态时，我尝试使用 css 类更改其颜色。

        <v-btn icon class="menu-btn">
            <router-link to="/client/dashboard">
                <v-icon class="menu-icon">
                    mdi-gauge-full
                </v-icon>
                <div class="menu-titles">Dashboard</div>
            </router-link>
        </v-btn>

    .router-link-active .menu-icon {
        color: #2F80ED ;
    }

问题是v-icon似乎不接受 css 颜色属性。有没有办法用 css 改变它？