标签: vuejs3

我正在尝试制作 Vue 3 应用程序，但没有 CLI 和 Webpack。

目前还没有官方文档。CDN 上有很多版本（vue.cjs.js、vue.cjs.prod.js、vue.esm-browser.js、vue.esm-bundler.js、vue.global.js、vue.runtime.global.js。 ...）。

选哪一个？以及如何挂载应用程序，旧方法不起作用。有许多在线示例如何使用新的 Composition API，但没有如何在没有 CLI/Webpack 的情况下启动项目。

嗨，我正在使用带有 Typescript 和类组件的 Vue 3。我只是从文档中复制粘贴了示例，但看起来 Typescript 存在问题：

TS1238: Unable to resolve signature of class decorator when called as an expression.
  This expression is not callable.
    Type 'typeof import(".../node_modules/vue-class-component/dist/vue-class-component")' has no call signatures.

TS2507: Type 'typeof import(".../node_modules/vue/dist/vue")' is not a constructor function type.

文档：https : //class-component.vuejs.org/guide/class-component.html

有人知道缺少什么吗？谢谢！

问题

我在 Vue.js 3 中使用 async setup()，但我的 HTML 内容消失了。我的组件模板没有插入到 HTML，但是当我删除 async 和 await 前缀时，我的 HTML 内容又回来了。我怎样才能解决这个问题？

async setup () {
    const data = ref(null)
    try {
        const res = await fetch('api')
        data.value = res.json()
    }
    catch (e) {
        console.error(e)
    }
    return {
        data
    }
}

我试过了

1. 我检查了 fetch，它返回了正确的响应
2. 我试过<Suspense>标签，但仍然是同样的问题

我正在尝试用 vite 替换 vue-cli 。我有一个 vite.config.js，所以我可以使用别名进行导入：

export default {
    alias: {
        '@': require('path').resolve(__dirname, 'src'),
    },
};

然后在我的 main.ts 中我尝试导入我的 css 文件（我尝试过使用或不使用.module：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

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

但我收到这个错误：

[vite] 无法解析模块导入“@/assets/app.module.css”。（由/src/main.ts导入）

我究竟做错了什么？

在搭建一个 Vue 3 项目后，我注意到我的 App.vue 中有一个错误。

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

API Reference

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

我试过放

    "vue/no-multiple-template-root": 0

在我的 .eslintrc.js

但错误仍然存​​在。我怎样才能摆脱错误？因为在 Vue 3 中，模板中不必只有一个元素。

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV …

模板：

<tremplate>
  <div ref="element"></div>
</template>

脚本：

export default {
  setup() {
    const elelemt = ref(null);
    return {
      element,
    };
  },
};

这是在 vue3 中定义 ref 的正常方式，但以 JavaScript 方式。如果我使用的是 TypeScript，我需要为 value 定义一个类型element，对吗？

我该如何确保 value 的正确类型element？

我可以通过以下方式获取 vue js 2 中的组件名称：this.$options.name。如何在 vue js 3 中获取它？

谢谢。

Vue 3 文档和民间文献中的指导是ref()针对标量和基元的，而reactive()针对对象的。

然而，在 JavaScript 中，数组是 Object 的一种特殊情况。尽管存在监视嵌套对象元素是否添加新属性和其他问题等问题，但无论从性能角度还是其他角度来看，是否存在是否将数组处理为 或 的最佳ref实践reactive？

有没有办法检测自定义组件中 modelValue 的更改？我想将更改推送到所见即所得编辑器。

我尝试监视 modelValue，但发出 modelValue 更新触发了该监视，从而创建了循环数据流。

代码：

export default {
  props: ['modelValue'],
  watch: {
    modelValue (val) {
      this.editor.editor.loadHTML(val)
    }
  },
  mounted () {
    this.editor.editor.loadHTML(val)
    this.editor.addEventListener('trix-change', 
      (event) => this.$emit('update:modelValue', event.target.value))
  }
}

<TextEditor v-model="someHtml"></TextEditor>

喜欢标题，关于链接： 新的script setup（不含参考糖）

<template>
  <TopNavbar title="room" />
  <div>
    {{ no }}
  </div>
</template>

<script setup>
import TopNavbar from '@/layout/TopNavbar.vue'
import { defineProps, reactive } from 'vue'

defineProps({
  no: String
})

const state = reactive({
  room: {}
})

const init = async () => {
  // I want use props in this
  // const { data } = await getRoomByNo(props.no)
  // console.log(data);
}
init()

</script>

<style>
</style>