标签: vuejs3

我有一个运行 Vue 3 和 vue-router 4 的 Quasar 应用程序

我的路线已设置完毕，并且在从组件模板导航时工作得很好

<router-link to="/route">Go to route</router-link>

不过，我希望能够通过我的方法访问路由器和路由。根据文档，我应该能够以某种方式访问​​路由器对象，this.$router，或路由器，或其他方式......但我似乎无法获得访问权限

我的整个单个文件组件看起来像

  <template>
    <q-page>
      <q-card>
        <q-form @submit="handleSubmit()" >
          <q-input v-model="param" />
          <q-btn label="submit" type="submit" />
        </q-form>
        <router-link to="/">Go to Foo</router-link> <!-- this works great -->
      </q-card>
    </q-page>
  </template>

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

  export default {
    setup () {
      const param = ref(null);
      return { param }
    },
    methods: {
      async handleSubmit () {
         // do stuff
         // route somewhere
      }
    }
  } …

假设我创建了一个自定义组件Comp.vue，它基本上是一个带有model-valueprop 和 的包装输入元素@update="$emit('update:modelValue', $event.target.value)。

它可能看起来像这样：

<template>
  <div>
  <label :for="name" class="block relative">
    <div>
        {{ label }}
    </div>
        <input
          :name="name"
          :type="type"
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)"
        />
  </label>
    </div>
</template>

<script>

export default {
  props: {
    label: {
      required: true,
      type: String,
    },
    modelValue: {
      required: false,
      default: "",
      type: [String, Number],
    },
    type: {
      default: "text",
      type: String,
    },
    name: {
      required: false,
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
};
</script>

现在我已将该组件导入到 App.vue 中。

为什么这有效： …

我正在努力使用 Vue 3 Composition API。我试图按逻辑问题拆分我的代码，但我无法弄清楚如何传递要在可组合函数中监视的属性。

这是组件：

export default defineComponent({
  props: {
    collapseY: {
      type: Boolean,
      required: false,
      default: false
    },
    barcodePulse: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  setup(props) {
    const pulse = ref(props.barcodePulse)
    const {getRandomVerticalScaleValue, getRandomAnimationDuration} = usePulse(pulse)

    return {
      getRandomVerticalScaleValue,
      getRandomAnimationDuration
    }
  }
})

这是usePulse可组合函数：

export interface usePulseData {
    getRandomVerticalScaleValue: () => number;
    getRandomAnimationDuration: () => number;
}

export const usePulse: (pulse: Ref<boolean>) => usePulseData = (pulse) => {
    const stopBarcodeAniation = (event: Event) …

我尝试了下面线程中的所有答案，但没有运气：

`Vue3 - Vite` 项目别名 src 到 @ 不起作用

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        extensions: ['.ts', '.js', '.vue'],
        alias: [{
            find: '@',
            replacement: resolve(__dirname, 'src')
        }],
    },
    plugins: [
        vue(),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ]
})

大家好，我在 vuedraggable 中遇到问题。当我将“项目 2”拖动到“项目 3”=> 我希望“项目 3”将与“项目 2”交换。请帮我。

我正在尝试在 Vue 3 应用程序中使用 Chart.js 3.6.0 为折线图渲染背景（渐变，但简单的颜色也不起作用）。用户可以在条形图和折线图之间切换（对于同一数据集）。有趣的是，它适用于条形图：

但折线图没有渐变：

这是数据配置：

data: {
    labels: props.labels as string[],
    datasets: [
        {
            data: props.data as number[],
            backgroundColor: getBackgroundColor(), // returns the gradient
            borderColor: getBorderColor(), // returns a color
            fill: true // tried all possible values for this
        }
    ]
}

我尝试删除所有可能导致问题的内容，但即使是带有硬编码数据的最基本配置也不起作用。

使用 ref 访问画布：

<template>
    <canvas class="statistics-canvas" ref="canvas" width="100%" height="100%"></canvas>
</template>

<script lang="ts">
    // ...
    setup() {
        const canvas = ref(document.createElement("canvas"));
        let chart: Chart;

        onMounted(() => createChart());

        function createChart() {
            chart = new Chart(canvas.value, …

使用 Vue.js v3 和 Parcel.js v2 开始一个新项目。设置和启动一个简单的Hello World应用程序一切顺利，除了浏览器控制台中的此警告：

功能标志 __VUE_OPTIONS_API__、__VUE_PROD_DEVTOOLS__ 未明确定义。您正在运行 Vue 的 esm-bundler 版本，它希望通过捆绑器配置全局注入这些编译时功能标志，以便在生产包中获得更好的树摇动。
有关更多详细信息，请参阅http://link.vuejs.org/feature-flags。

此外，Vue Devtools 在控制台中被禁用。

链接中仅说明了如何在 Webpack、rollup 和 Vite 上设置这些标志。

我正在创建一个 Vuejs 应用程序，并且想使用 Vuex。

但我无法添加 Vuex 商店。

这是我的代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userData: "USER!"
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
})

export default store

我收到错误：

未捕获的语法错误：请求的模块“/node_modules/.vite/vue.js?v=52de2cee”不提供名为“default”的导出

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
import Vuex from 'vuex'
import { store } from '@/store/users'

app.use(router)
app.use(Vuex)

app.mount('#app')

我做错了什么？多谢。

我正在 Laravel 8.x 应用程序中工作，并且安装 vue 2.6.12 的时间最长。我正在努力升级以将 Vue 3 与 laravel 一起使用，并与 Webpack 一起使用。我已经更新了我的package.json脚本并安装了以下内容以实现 Vue 3 兼容性：

{
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "bootstrap": "^4.5.2",
        "jquery": "^3.4",
        "laravel-mix": "^6.0.39",
        "laravel-mix-polyfill": "^2.0.0",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "@vue/compiler-sfc": "^3.2.24",
        "jquery-validation": "^1.17.0",
        "jquery.nicescroll": "^3.7.6",
        "jquery.scrollto": "^2.1.2",
        "mdb-vue-ui-kit": "^1.7.0",
        "sass": "^1.21.0",
        "sass-loader": "^7.1.0",
        "vue": "^3.2.24",
        "vue-moment": …

通常我使用命名空间 vuex。但我决定退出vuex，因为Pinia有 vue 核心团队的支持。我认为这对以后的发展比较有利。现在我正在使用模块化方法创建商店，但无法真正理解如何在打字稿项目上处理该部分。

假设我有一个user界面。

interface User {
  email: string,
  username: string,
}

export default User;

我正在store/modules/state.ts调用类型并创建用户状态。

import User from "../../types/User"

export const state = () => {
  return {
    user: {} as User | null,
  };
}

我store/modules/index.ts应该导入状态。然后将namespace: true其导出到 pinia 商店的 DefineStore() 中。

import {state} from "./state"

export default {
  namespace: true,
  state,
}

在store/index.ts

import {defineStore} from "pinia"
import {data} from "./modules"

export const Store …