标签: vuejs3

我在使用组合 API 在 vue 3 中双向绑定反应式组件时遇到问题。

设置：

父调用代码是：

<template>
  <h1>{{ message.test }}</h1>
  <Message v-model="message" />
</template>

<script>
import Message from '@/components/Message.vue';
import { reactive } from 'vue';

export default {
  name: 'Home',
  components: { Message },

  setup() {
    const message = reactive({ test: '123' });

    return {
      message
    };
  }
};
</script>

子组件代码为：

<template>
  <label>
    <input v-model="message" type="text" />
  </label>
</template>

<script>
import { computed } from 'vue';

export default {
  props: {
    messageObj: {
      type: Object,
      default: () => …

通过选项 API，我们可以使用这些方式来扩展组件。假设我们有 2 个组件。

组件1.vue

<script>
export default {
  methods: {
    init(message) {
      alert(message)
    }
  }
}
</script>

Component2.vue

<script>
    import Component1 from './Component1'
    
    export default {
      extends: Component1,
      methods: {
        showAlert() {
          // we can access Component1 'init()' method here
          this.init('Hello World!')
        }
      },
      mounted() {
        this.showAlert()
      }
    }
</script>

现在，如何让它与组合 API 一起工作？我已经检查过该extends属性在文档中仍然可用，但没有明确的使用说明。

https://v3.vuejs.org/api/options-composition.html#extends

考虑以下带有组合 API 的代码。

组件1.vue

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const init = (message) => …

我想使用 vue.js 版本 3 上传文件。

我可以导入ref，但不确定如何使用它来获取文件数据？

文件上传测试.vue

<template>
<h1>File Upload</h1>
<div class="container">
    <div>
      <label>File
        <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
      </label>
        <button v-on:click="submitForm()">Upload</button>
    </div>
  </div>
</template>

<script src="./FileUploadTest.ts" lang="ts"></script>

文件上传测试.ts

import { Options, Vue } from "vue-class-component";
import { ref } from 'vue';
import axios from "../../axios/index";

@Options({})
export default class FileUploadTest extends Vue {

    protected file: any;

    submitForm() {
        const formData = new FormData();
        formData.append('bytes', this.file);

        axios.post('https://localhost:44313/api/app/file/save',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
        ).then(function (data) { …

我正在将 Vue Router 与 Vue 3 一起使用，并尝试添加一个包罗万象的路由以在用户尝试访问无效 URL 时重定向用户。当我尝试使用通配符 (*) 时，我将以下错误记录到控制台：

Uncaught Error: A non-empty path must start with "/"
    at tokenizePath (vue-router.esm.js?8c4f:975)
    at createRouteRecordMatcher (vue-router.esm.js?8c4f:1106)
    at addRoute (vue-router.esm.js?8c4f:1190)
    at eval (vue-router.esm.js?8c4f:1335)
    at Array.forEach (<anonymous>)
    at createRouterMatcher (vue-router.esm.js?8c4f:1335)
    at createRouter (vue-router.esm.js?8c4f:2064)
    at eval (index.js?a18c:26)
    at Module../src/router/index.js (app.js:1402)
    at __webpack_require__ (app.js:854)

我假设这是因为我没有在包含星号的路径前面加上“/”，但是如果我这样做，那么捕获全部不起作用。以下是我的路线：

imports...

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'User',
    // route level code-splitting
    // this generates a separate chunk (user.[hash].js) …

我尝试使用 Vue 3，但我看起来无法再次使用 Vue.use(exampleplugin)。

我在生成 vue 创建项目后使用命令 vue add bootstrap-vue。并在插件 bootstrap-vue 警告代码：

import Vue from "vue";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);

输出警告端子：

./src/plugins/bootstrap-vue.js 中的警告

“在 'vue' 中找不到导出 'default'（导入为 'Vue'）

./node_modules/bootstrap-vue/esm/utils/vue.js 中的警告

“在 'vue' 中找不到导出 'default'（导入为 'Vue'）

那有什么问题？以及如何使用 vue 3 添加插件 bootstrap-vue？

我正在将组件从常规 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 解决这个问题的正确方法是什么？

当我将脚本创建为打字稿 (lang="ts") 时，我收到一条错误消息

“找不到模块‘./components/Navigation’或其相应的类型声明（Vetur 2307）。”。

我意识到这只有在我将 lang 设置为 ts 时才会发生，这正是我构建 Vue 应用程序所需要的。

应用程序

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

导航.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

我正在使用 Vue 3 并尝试从以下教程中将 tailwindcss 添加到其中。https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm

我已经使用以下命令安装了依赖项，

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

但是当我尝试使用以下命令创建配置文件时

npx tailwindcss init -p

它给了我以下错误。

npx：在 5.2s 中安装了 83 找不到模块 'autoprefixer' 需要堆栈：

• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js

我不知道为什么autoprefixer没有检测，因为我已经安装了它。甚至 package.json 都有。

{
  "name": "wooclime",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0", …

我的“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');