标签: vuejs3

在 vuejs3 下我使用命令安装 vee-validate

yarn add vee-validate@next

成功后我运行服务器并出现错误

$ yarn run serve            
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin
ERROR  Failed to compile with 1 errors                                                                                                                                                                   
    2:07:01 PM

This dependency was not found:

* vee-validate/dist/rules in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/auth/Login.vue?vue&type=script&lang=js

To install it, you can run: npm install --save vee-validate/dist/rules
Error from chokidar (/mnt/_work_sdb8/wwwroot): Error: Circular symlink detected: "/mnt/_work_sdb8/wwwroot/wwwroot" points to "/mnt/_work_sdb8/wwwroot"

我将 vuejs 2 应用程序中的代码粘贴为：

<script>
  import { bus } from '../../../src/main'
  import appMixin from …

i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How???

const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false })

const handleSave = () => {
      const group = toRaw(newGroup)
      persist(group).then(() => {
        newGroup.id = undefined
        newGroup.name = 'demo'
        console.log(isReactive(group)) //say false but the group.name value is demo
      })
     
    }

destructuring the reactive obj as const …

我创建了一个controller在每个组件中全局使用的插件，但我无法使其与 Vue 3 + TypeScript + Composition API 一起使用我收到 TypeScript 错误

用户界面/插件/controllers.ts

import { App } from 'vue'
import { provider, IProvider } from '@/core/presentation/provider'

export default {
  install: (app: App) => {
    const controllers: IProvider = provider()
    app.provide('controllers', controllers)
  }
}

主要.ts

import { createApp } from 'vue'
import { controllers } from './ui'

createApp(App)
  .use(controllers)
  .mount('#app')

@/core/presentation/provider/provider.ts

import { UserController } from '../controllers'
import { IProvider } from './provider.types'

export const provider = (): IProvider => …

我正在遵循使用以下代码的 Vue 教程：

let app
auth.onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})

如果用户重新加载页面，这应该确保 Firebase 在安装应用程序之前加载 authState。

但是，我使用的是 Vue 3，因此我无法new Vue()再通过它进行初始化，因为你现在必须使用它createApp。我正在按以下方式初始化和安装我的应用程序：

createApp(App).use(store).use(router).mount('#app')

不幸的是，我不知道如何确保数据库仍然以相同的方式初始化，并且我无法找到合适的解决方案（在谷歌和SO上花费了最后一个小时）。

非常感谢任何帮助，也许我只是缺少一个简单的承诺概念或类似的东西。

非常感谢，祝身体健康！

我试图在 vue 3 中使用 vuex 模块。我不确定我做错了什么？

我将 index.js 作为主文件，其余的我计划将其放入模块文件夹中。

当我想调度操作时，出现错误：“[vuex] 未知操作类型：users/registerUser”。

模块文件结构

索引.js

import { createStore } from 'vuex'
import users from './modules/users'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    users
  }
})

Vue 文件中的调度操作

const registration = () => {
  store.dispatch('users/registerUser', {
    firstName,
    lastName,
    email,
    password
  })
}

用户.js

import { createStore } from 'vuex'

export default createStore({
  namespaced: true,
  state: {
    user: {
      firstName: null,
      lastName: null,
      email: null,
    }
  }, …

我希望我可以包含完整的代码。不然很难理解我的问题。

我为我的 Vue 应用程序创建了一个可组合函数，其目的是从数据库中获取文档集合。\n可组合函数如下所示：

import { ref, watchEffect } from 'vue'\nimport { projectFirestore } from '../firebase/config'\n\nconst getCollection = (collection, query) => {\n    const documents = ref(null)\n    const error = ref(null)\n\n    let collectionRef = projectFirestore.collection(collection)\n    .orderBy('createdAt')\n\n    if (query) {\n        collectionRef = collectionRef.where(...query)\n    }\n\nconst unsub = collectionRef.onSnapshot(snap => {\n        let results = []\n        snap.docs.forEach(doc => {\n            doc.data().createdAt && results.push({ ...doc.data(), id: doc.id })\n        })\n        documents.value = results\n        error.value = null\n    }, (err) => {\n        console.log(err.message)\n        document.value = null\n        error.value = …

我将数组作为道具传递给另一个组件，当我想在该组件中安装时读取此内容时，我得到了 Proxy {}。如何从这个道具中读取数据？您可以在示例中看到，当我想要控制台 log prop 时，结果是 Proxy\xc2\xa0{}。我可以看到 HTML 结构中的所有值，但不能在安装的控制台中看到。

<template>\n  <div class="custom-select-container">\n    <div class="selected-item" @click="openSelect">\n      <span class="selected-items-text">{{ selectedItem.name }}</span>\n      <span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />\n    </div>\n    <transition name="fade">\n      <ul v-show="options.length && showOptions" class="custom-select-options">\n        <li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>\n      </ul>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport { ref, onMounted } from \'vue\'\n\nexport default {\n  props: {\n    options: {\n      type: Array,\n      default: () => []\n    }\n  },\n\n  setup(props) { \n    let showOptions = ref(false);\n    let selectedItem = …

我有一个非常简单的 Vue 3 组件，它看起来与文档中的一些示例相同。代码如下：

// Typewriter.vue

<template>
  <div id="wrapper">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: "typewriter",
  props: {
    phrase: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      text: "",
    };
  },
  mounted() {
    console.log('Hello World!');
  }
};
</script>

<style scoped></style>

然后我通过以下方式在另一个组件中渲染它：

<template>
    <p>Blah</p>
    <typewriter phrase="some text" />
</template>

<script>
import Typewriter from "@/components/Typewriter.vue";

export default {
  name: "bio",
  components: {
    Typewriter
  }
};
</script>

<style scoped></style>

不过，mounted()好像没有被叫到？如果我将其更改为，setup()那么该方法内的任何内容都会被调用，但是当然这不适用于我的情况，因为我需要访问this该组件。 …

问题

我们正在构建一个新应用程序，并选择使用 GULP 和 Webpack 管道来编译 SCSS、Vue 3 和 Typescript 文件。不幸的是，我花了最后一天寻找递归问题的答案，我解决了一个问题，它又回到了前一个问题，修复了这个问题，它又回到了我已经解决的问题，依此类推。

作为引入vue-loader初始错误的一部分，抛出说明vue-template-compiler是必需的依赖项。下载缺少的依赖项修复了这个问题，但现在抛出一个新错误，指出版本与 Vue 不匹配，因为它们都需要在同一版本上。

环顾四周后，我知道在 v3 中vue-template-compiler被替换了@vue/compiler-sfc，所以我很自然地卸载了前者并安装了后者。然而，它让我回到了它声明vue-template-compiler需要安装或通过选项指定兼容编译器的地方。

我查看了有关指定编译器的各种问题和答案，webpack.config但不断地回到我看过的东西。

尝试的解决方案

用于 Vue 3 Vue 3 支持打字稿的Vue 模板Webpack 的Vue 3 问题

错误一

ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- vue@3.0.11 (<Project Path>\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (<Project Path>\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both. …

我有一个问题我不明白：

只是我要显示来自 API 的一些数据，它一切正常，但我收到一个错误personnel.departmentID，undefined并且我的 vue-debug 工具无法工作。

仅当我departmentID为其余的 while 分配任何内容（如名字、姓氏等）时，我才会得到它。

奇怪的是，departmentID.name等的数据显示正常，但抛出以下错误。

在我的控制台中我收到错误：

Uncaught TypeError: _ctx.personnel.departmentID is undefined
    render edit_personnel.vue:64
    renderComponentRoot runtime-core.esm-bundler.js:846
    componentEffect runtime-core.esm-bundler.js:4280
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4263
    mountComponent runtime-core.esm-bundler.js:4222
    processComponent runtime-core.esm-bundler.js:4182
    patch runtime-core.esm-bundler.js:3791
    render runtime-core.esm-bundler.js:4883
    mount runtime-core.esm-bundler.js:3077
    mount runtime-dom.esm-bundler.js:1259
    js personnel_edit.js:4
    Webpack 7

值其显示正确

输入显示正确的数据

回复

<input type="text" class="form-control" v-model="personnel.departmentID.name" :key="personnel.departmentID.name" />
    </form>
  </div>
</template>
    
<script>

export default {
  name: "edit_personnel",
  data: () => ({
    personnel: [],
    departments: [],
    location: [], …