标签: vuejs3

找不到任何东西来解决这个看似明显的问题。

刚刚使用 Typescript 从 Vue 2 升级到 Vue 3 和 Vuex。

尽管遵循 Vue 3 说明，但 this.$store 似乎无法访问。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：属性 '$store' 不存在于类型 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、字符串、{}>>'。

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 | 

主文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import …

正如此处所解释的，Vue 3 移动了全局 Vue 实例上可用的一堆功能。它们现在被命名为进口。这让我觉得我应该能做到import {set} from 'vue'，但我做不到。它不在那里。set()在哪里？

我从 vite / vuejs 3 开始

使用 npm install -D sass 安装 sass 后，我尝试将我的 _variables.js 文件添加到 vite.config.js

css: {preprocessorOptions: {scss: {additionalData: `@import" ./src/css/_variables.scss ";`,},},},

不工作！

它也适用于 vue.config

css: {
     loaderOptions: {
       sass: {
         sassOptions: {
            prependData: `@import" @ / css / _variables.scss ";`,
         }
       }
     }
   },

之后尝试在 main.js import "./css/_variables.scss" 中导入文件

不幸的是，我的组件找不到变量，错误在哪里

我有一个使用 Vite/Vitest 的 vue3 项目，如 Vue.js 文档中的推荐。

这是该项目的结构：

src
  components
    // my Vue components here, potentially in sub-folders. For example:
    HelloWorld.vue 
  router
    index.ts
  App.vue
  main.ts
vitest
  components
    // My test specs. For example:
    HelloWorld.spec.ts
// ...
tsconfig.app.json
tsconfig.json
tsconfig.vite-config.json
tsconfig.vitest.json
vite.config.ts

@/文件夹的别名在src组件文件中正确解析。但是，在我的测试文件中，我收到错误：找不到模块。

例如，在HelloWorld.spec.ts：

src
  components
    // my Vue components here, potentially in sub-folders. For example:
    HelloWorld.vue 
  router
    index.ts
  App.vue
  main.ts
vitest
  components
    // My test specs. For example:
    HelloWorld.spec.ts
// ...
tsconfig.app.json
tsconfig.json
tsconfig.vite-config.json
tsconfig.vitest.json …

我正在尝试使用组合 API 将数据从子级发送到父级

我收到以下警告。

[Vue 警告]：无关的非发射事件侦听器 (updatedcount) 已传递给组件，但无法自动继承，因为组件呈现片段或文本根节点。如果侦听器仅用作组件自定义事件侦听器，请使用“发射”选项声明它。at <HelloWorld onUpdatedcount=fn > at

子组件.vue

<template>
  <h1>{{ store.count }}</h1>
  <button @click="fired">click me</button>
</template>

<script>
import useStore from "../store/store.js";
export default {
  name: "HelloWorld",
  setup(_,{ emit }) {
    const store = useStore();

    const fired = () => {
      store.count++;
      emit("updatedcount", store.count);
    };

    return {
      store,
      fired
    };
  },
};
</script>

父组件.vue

<template>
  <div>
    {{ hello }}
    <br />
    <br />
    <input type="text" v-model="hello.searchQuery" />
    <br><br>
    <button @click="hello.count--">click me too!</button>
    <hello-world @updatedcount="mydata" />
  </div> …

我是一名 Vue.js 开发人员，正在了解从 Vue 2 添加到 Vue 3 的新功能，即 Composition API（在 Vue 3 中添加）。

对于状态管理来说，随着 Vue 3 的发布，社区似乎正在从使用 Vuex 转向 Pinia。

Pinia 与 Vuex 之间有什么区别？从概念上讲，Vue 2 到 Vue 3 发生了什么变化，使得 Pinia 更适合 Vue 3？

谢谢。

我正在尝试将一些字符串注入到 Vite 应用程序的 index.html 中（使用 vue3 模板）。例如，在 vue-cli 项目中，我们会有

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Vite 的方式是什么？（我知道在这种情况下 BASE_URL 只是“/”。我要求通用的解决方案）我可以使用仅涵盖环境变量的解决方案，但如果知道一个可以使用的更通用的解决方案，那就太好了JS 代码如

<title><%= htmlWebpackPlugin.options.title %></title>

我真的很感激一个不需要安装 npm 包的解决方案

我使用Vue 3.1.1

我在实验阶段使用脚本设置和单个文件组件。使用脚本设置，我了解defineProps、defineEmit和useContext，但我不了解如何使用渲染函数。

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps<{
    text: string
}>()

const handleClick = () => {
    console.log('click!!')
}

// Render function...

/* The template I want to create.
    <button
        class="btn btn-primary"
        type="button"
        @click="handleClick"
    >
        {{ props.text }}
    </button>
*/
</script>

我想在 Vue 3 中使用 Bootstrap 5。由于 Bootstrap 5 使用 vanilla JS（没有 JQuery），我可以直接在 Vue 3 项目中使用 Bootstrap 5（不使用 Bootstrap-Vue）吗？有人可以指导我如何在 Vue 3 中使用 Bootstrap 5 吗？

我正在制作一款国际象棋游戏，并使用 Vue 3 和 TypeScript 以及 Pinia 进行状态管理。

我想做如下的事情：

export const useStore = defineStore("game", {
  state: () => {
    return {
      moves: [],
      gameBoard:  getInitialBoard(),
      playerTurn: PieceColor.White,
      previousPieceSelected: undefined
    }
  },
    updatePreviousPieceSelected(piece: Piece | undefined ) {
      this.previousPieceSelected = piece
    }
  }
})

更新游戏状态.vue

setup() {
    const store = useStore()
    const previousPieceSelected: Piece | undefined = store.previousPieceSelected;
    let playerTurn: PieceColor = store.playerTurn;

    const initialGameState: GameState = {
      boardState: store.gameBoard,
      playerTurn,
    };

    const updateGameState = (
      cellRow: number,
      cellCol: number,
      currentPiece: …