标签: vuejs3

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点：

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',
  computed: {
    ...mapGetters('auth', ['isAdmin']),
  },
});
</script>

当前Vue v3 迁移文档，SFC Composition API Syntax Sugar (<脚本设置>)，链接到此 RFC 页面：https://github.com/vuejs/rfcs/pull/182

使用计算反应性属性只有一个示例：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有可用的 Vuex 4 文档提到<scrip setup>，所以我仍然不清楚在使用此语法时应该如何使用？mapGetters或者使用 Vuex 4 解决这个问题的正确方法是什么？

我的“Generateur”组件正在向我的“Visionneuse”组件发送道具。浏览器中一切正常，但我在控制台中看到以下消息：

Set operation on key "texteEnvoye" failed: target is readonly.\n

我真的不知道为什么会收到此消息，因为我将道具传递给了引用。\n这是我的组件：\n“Generateur”

<template>\n  <div>\n    <h1>G\xc3\xa9n\xc3\xa9ration d'une carte de voeux</h1>\n    <div class="board">\n      <Visionneuse :texteEnvoye="texte" :taille="0.5"/>\n    </div>\n    <textarea\n      :style="'width: 60%; resize:none;height: 100px;'"\n      v-model="texte"\n      placeholder="\xc3\x89crivez votre texte ici">\n    </textarea>\n  </div>\n  <div>\n    <button\n      v-if="lien.length == 0"\n      id="boutonObtenirLien"\n      v-bind:class="{ enCours: lienEnCours }"\n      class="btn first"\n      @click="obtenirLien">Obtenir le lien</button>\n    <p\n      v-if="lien.length > 0">\n      Votre carte de voeux est accessible au lien suivant:<br/>\n      <a :href="lien">{{ lien }}</a>\n    </p>\n  </div>\n</template>\n\n<script>\nimport Visionneuse from '@/components/Visionneuse.vue';\n\nimport axios from 'axios';\n\nimport {\n …

在 Vue 2 中可以使用

Vue.config.productionTip = false;

关闭productionTip开发版本的警告。但是它不适用于 Vue 3：

Vue.config.productionTip = false;

Vue.config && (Vue.config.productionTip = false);

const App = {
  data: () => ({
    foo: 'bar'
  })
};
Vue.createApp(App).mount('#app');

Vue 3 + TypeScript。努力让工作变得很棒。

以下代码会导致 devtools 中出现错误（虽然 cli 是干净的） - 似乎 props 未定义，所以我也尝试了各种类型的绑定：:icon="['fa', 'redo']"- 无济于事。

vue-fontawesome 确实，即使安装了软件包并且index.d.ts具有正确的成员导出，我也通过导入获得了 TS2307 export const FontAwesomeIcon。（第 2.0.2 版）

关于出了什么问题有任何线索吗？

主要.ts

// font-awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; // <-- TS2307 squiggles
import { faRedo } from '@fortawesome/free-solid-svg-icons';

library.add(faRedo);

// bootstrap
createApp(App)
    .use(store)
    .use(router)
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount('#app');

reload.vue（自定义组件）

<template>
  <span @click="doReload">
    Reload
    <font-awesome-icon icon="redo" />
  </span>
</template>

<script>
import { defineComponent } from …

我正在将 Vue3 与 vue-router 4.0.5 一起使用，并且遇到一个问题，其中 useRoute() 似乎可以正确检索路线，但路线的查询未定义，即使存在查询也是如此。

对于路径/search?q=vue，预期等于searchQuery但vue返回未定义。

在模板中，{{ $route.query.q }}正确返回查询值。

import { useRoute } from "vue-router"

export default {
  name: "Search",
  setup() {
    const route = useRoute()
    const searchQuery = route.query.q

    console.log(route)
    console.log(searchQuery)

    return {
      searchQuery
    }
  }
}

<template>
  <div>{{ $route.query.q }}</div>
</template>

登录到控制台时，该route对象已正确记录并包含路由的查询对象，但searchQuery未定义。

我想知道为什么searchQuery在这个例子中返回为未定义。

我正在尝试更新为 vue 3 制作的包，但遇到了 vue-template-compiler 的问题。

我尝试遵循类似的帖子，该帖子有某种类似的问题，但它似乎对我不起作用。（Vue包版本不匹配）

我收到以下错误：

> @utt/message-system@1.1.4 build:es
> cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es

[!] Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js) …

我有以下package.json文件：

{
    "name": "view",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue-leaflet/vue-leaflet": "^0.6.1",
        "autoprefixer": "^10.3.1",
        "core-js": "^3.6.5",
        "gpxparser": "^3.0.8",
        "leaflet": "^1.7.1",
        "postcss": "^8.3.6",
        "tailwindcss": "^2.2.7",
        "typescript": "^4.3.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vue3-openlayers": "^0.1.38",
        "vuex": "^4.0.2"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^5.0.0-beta.3",
        "@vue/cli-plugin-eslint": "^5.0.0-beta.3",
        "@vue/cli-plugin-router": "^5.0.0-beta.3",
        "@vue/cli-service": "^5.0.0-beta.3",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.0.0",
        "prettier": "^2.2.1",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    }
}

如何将打字稿添加到这个 …

创建 Vue 3 项目并添加 Vuetify 3 Alpha 后，当我运行“npm runserve”时，这是我得到的错误。我尝试不添加 Vuetify 3 Alpha，Vue 3 项目启动正常，只是在添加 Vuetify 后才出现错误。

INFO  Starting development server...
ERROR  ValidationError: Progress Plugin Invalid Options

    options should NOT have additional properties
    options should NOT have additional properties
    options should NOT have additional properties
    options should pass "instanceof" keyword validation
    options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional …

在从 vue 2 迁移到 vue 3 的过程中，我收到一些编译警告。弃用$listenersin 组件就是这些警告之一。我已经检查了官方文档以$attrs通过删除$listeners. 我是 vue 3 的新手。所以，无法理解如何处理与侦听器相关的那些警告。

这是片段：

第一种情况： 组件 1

    <template>
    <div>
        <input ref="input"
               :value="txtField"
               @input="txtField=$event.target.value"
               :type="inputType"
               :class="inputClass"
               :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :onfocus="disabled&&'this.blur();'"
               :tabindex="tabindex"
               v-on="listenersInput" // here is the method where $listeners used
               @keyup.enter="enterHandler"
               @blur="validateOnEvent"/>
     </div>
</template>

//method 

listenersInput() {
            //var vm = this;
            return Object.assign({}, this.$listeners, {
                input: function(event){ /*vm.$emit('input',event.target.value);*/}
            });
        },

第二种情况： 组件 2

<template>
  <custom-button 
      v-bind="buttonProps"
      v-on="$listeners"
      :class="buttonClass"
      @click="tooggle">
  </custom-button>
</template>

这两种情况该如何处理呢？

我想使用和更改其他组件的全局变量，我的文件结构如下所示......

我的变量位于 global.sass 文件中，但无法访问其他组件中的变量。