标签: vue-cli

我是 Vuetify 的新手，我真的很难知道如何仅导入组件来使用它。

我正在使用 Vuetify 2.4.2

正如他们所说的文档，但是 vuetify 导出的路径在哪里？

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

我使用这样的选项卡和元素。我如何为此从 Vuetify 调用组件？

 <v-card>
    <v-tabs show-arrows v-model="tab">
      <v-tabs-slider color="teal"></v-tabs-slider>
      <template v-for="sticker in allStickers">
        <v-tab :key=sticker.id :href="'#tab-'+sticker.id">
          <img :src=sticker.imgurl alt="">
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <template v-for="sticker in allStickers">
        <v-tab-item :key=sticker.id :value="'tab-' + sticker.id">              
          <ul class="liststickers">
            <template v-for="stick in sticker.stickers">
              <li :key=stick.id @click="sendSelectedSticker(stick.id)">
                <img :src=stick.imgurl alt="">
                <p class="stick_price">{{stick.price}}</p>
              </li>
            </template>
          </ul>
        </v-tab-item>
      </template>
    </v-tabs-items>
  </v-card> …

我正在尝试显示动态导入的图像，但它无法处理错误

“找不到模块”

这是我的组件

<template>
      <div class="footer">
        <div v-for="footerItem in getters" :key="footerItem.id">
          <img :src="methods.requireImage(footerItem.icon)" alt="">
        </div>
      </div>
    </template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '@/store'
import { requireImage } from '@/modules/images'

export default defineComponent({
  name: 'Footer',
  setup () {
    const store = useStore()
    const methods = {
      requireImage
    }

    return {
      getters: store.getters.getFooterItems,
      methods
    }
  }
})
</script>

这是模块

export const requireImage = async (link: string) => {
  // return require(link)
  const image = …

我在目录中构建了一个 Vue JS 应用程序dist。为了运行，我使用http-server以下命令全局安装：

npm install -g http-server

我使用以下命令运行应用程序：

http-server dist

所以我可以访问该网站http://localhost:8080，它工作正常。但在我的应用程序中，我vue-router配置了历史记录模式，因此我应该访问类似 的 URL http://localhost:8080/page1，但问题是http-server返回 404：

curl -i http://localhost:8080/page1

HTTP/1.1 404 Not Found
accept-ranges: bytes
Date: Sat, 11 Sep 2021 12:41:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 0

我如何解决它？

我使用vue add pwaVue Cli 在这个项目中添加了 PWA。它安装两个包
“@vue/cli-plugin-pwa”：“~5.0.0”，“register-service-worker”：“^1.7.2”，

但是当我运行时npm run serve / npm run build它显示以下错误。

INFO  Starting development server...
0% compiling ERROR  TypeError: Cannot read property 'tap' of undefined

我安装vue-cli并制作了一些组件，并且一切正常，直到必须用键更新一些对象值为止

obj = {
    key1: value1,
    key2: value2,
    key3: value3
};

数据正在更新，但是视图未更新，当我深入研究Vue文档时会说

由于JavaScript的限制，Vue无法检测到对数组的以下更改：
1.当您直接使用索引设置项时，例如vm.items [indexOfItem] = newValue

解决方案是使用，Vue.set()但是当尝试使用时（在我的组件内部），我得到以下结果：

Vue.set(example1.items, indexOfItem, newValue);

未捕获ReferenceError：未定义Vue

我正在使用vue-cli 3的build命令来构建我的Vue应用。

 vue-cli-service build

为我构建了大量的部署文件。这些前缀app.和vendor.等。

有什么方法可以向这些文件添加一些应用程序专用的前缀或后缀，例如：

signup.app.62948721.js
signup.vendor.3fc5b322.js
...

我将多个Vue应用程序部署到相同的目录结构中，并且想要一种区分它们的方法。

我想导入一个 JSON 文件来使用它，我需要它在未来修改它所以我把它放在public文件夹 not 中assets，当我这样引用它时import JSON from ../../public/Data.json它可以工作，但我不认为在构建项目后可以解决因为构建后没有public文件夹。所以我试过这个：

let addr = process.env.BASE_URL;
import JSON from `${addr}Data.json`;

但它抛出一个错误：SyntaxError 我现在很困惑哪种方式最好，还有另一种方式吗？

我已经开始了一个全新的 Quasar CLI 项目，我想以我习惯的方式使用 Pug：在我的lang="pug"一些 .vue 文件中加入一个标签：

<template lang="pug">
  q-page(class="flex flex-center")
    p Well hello there
...

这会引发此错误：

组件模板需要一个根元素，而不仅仅是文本

Quasar给出的建议是添加这个配置：

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

但这前提是我所有的 pug 文件都在名为 的文件中.pug，这不是我的偏好。

有没有办法lang="pug"在我的 vue-cli 项目中像往常一样工作？

Quasar CLI........ v0.17.24

Quasar 框架.. v0.17.20

问题
我正在使用Vue CLI应用程序。有一个孙组件需要访问另一个组件的元素的属性。它真的只需要clientHeight财产。

所以Content2.vue组件需要访问clientHeight这个元素的属性：（<div id="header"></div>在Header.vue 中）。

尝试的解决方案

• 我试过使用$refs. 并且根据这个 stackoverflow 答案 $refs仅适用于与父/子直接相关的组件。

• 我也考虑过将$refsor添加clientHeight到商店（vuex），但它似乎有点矫枉过正。

• 我总是可以使用原版并使用querySelector或getElementById。但想想可能有更好的东西。

谢谢你的帮助！

今天我正在制作一个 todo 网络应用程序，但现在我想Todo在我的Todolist组件中导入一个。我的组件：

应用程序（父）--> Todolist（子）--> Todo（子）

错误：

24:5 错误“Todo”组件已注册但未使用 vue/no-unused-components

代码

待办事项列表

<template>
<!-- TEMPLATE FOR THE TODOS -->

  <div v-for="(todo) in todos" :key="todo.id">
    <Todo
      :todo="todo.text"
      :index="todo.id"
      :checked="todo.checked"
      :deleteTodo="deleteTodo"
    />
  </div>

</template>

<template>
<!-- TEMPLATE FOR THE TODOS -->

  <div v-for="(todo) in todos" :key="todo.id">
    <Todo
      :todo="todo.text"
      :index="todo.id"
      :checked="todo.checked"
      :deleteTodo="deleteTodo"
    />
  </div>

</template>

命令行告诉我导入已导入，但导入尚未使用。

希望大家帮帮我

提前致谢！