标签: 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 …

我正在尝试更改生产构建的公共路径，但似乎无法使其正常工作。当我进行生产构建时，我想将公共路径从 更改/为./，但我在文档中找不到如何执行此操作的任何内容。我使用vite.js作为我的构建工具。也许这是 Vue 3 和 Vite 特有的，我不确定。

我尝试添加vue.config.js文件和.env变量，但到目前为止没有任何效果。

当我构建时，我得到以下输出，路径开头为/：

<head>
  <script src="/assets/index.30c61b3b.js"></script>
  <link href="/assets/vendor.29497e16.js">
  <link href="/assets/index.7123a98f.css">
</head>

但对于生产我希望它改为./这样：

<head>
  <script src="./assets/index.30c61b3b.js"></script>
  <link href="./assets/vendor.29497e16.js">
  <link href="./assets/index.7123a98f.css">
</head>

我尝试添加vue.config.js但没有帮助：

module.exports  = {
    publicPath: process.env.NODE_ENV  ===  'production'  ?  './'  :  '/'
}

并且.env

NODE_ENV=production
BASE_URL=./

尝试使用 vuejs 3 和可组合 API 创建一个基于 Bootstrap 5 的（半）可重用模态组件。设法让它部分工作，
给定（主要是标准 Bootstrap 5 模式，但基于“show”属性添加类，以及正文和页脚中的插槽）：

<script setup lang="ts">
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "<<Title goes here>>",
  },
});
</script>

<template>
  <div class="modal fade" :class="{ show: show, 'd-block': show }"
    id="exampleModal" tabindex="-1" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <slot name="body" />
        </div>
        <div class="modal-footer">
          <slot name="footer" />
          <button type="button" class="btn …