小编Bou*_*him的帖子

我有一张桌子

<v-data-table
  :headers="headers"
  :items="bookings"
  class="elevation-1"
  :search="search"
>
  <template slot="items" slot-scope="props">
    <td>{{ props.item.date }}</td>
    <td>{{ props.item.time }}</td>
    <td>{{ props.item.vehicle }}</td>
  </template>
</v-data-table>

在 Vuetify 中制作，一切正常，我只需要将交替行变成不同的颜色。或者将引导程序.table-striped类提供给表。

我正在尝试使用组合 API 在 Vue 3 组件中输入提示我的道具。

所以，我这样做：

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: FlashInterface,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
            // Stuff
        }
};

我的FlashInterface看起来像这样：

export default interface FlashInterface {
    level: string,
    message: string,
    id?: string
}

除了在这种情况下我收到此错误外，此界面运行良好：

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here. …

通过选项 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) => …

运行我的应用程序时出现此错误：

警告编译了 1 个警告 11:50:40 PM 在 ./src/store/store.js 中警告“在‘vuex’中找不到导出‘createStore’

我安装了 vuex npm install --save vuex

我正在使用 vue 3

我的 Store.js：

import { createStore } from "vuex";
import Movie from './Modules/Movie'
import post from './Modules/post'



const store = createStore({
    modules: {
        post,
        Movie
    },

   

});

export default store;

我的 main.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'
import store from './store/store.js'
const app = createApp(App);
app.use(store);
app.use(router);

app.mount('#app');

我想使用 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) { …

当我将脚本创建为打字稿 (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", …

我遇到了 vue3、ts、vue cli 的错误，它说 Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export. 从文件导入组件时我不知道为什么这个特定组件决定现在工作。

这是 Features.vue

<script lang="ts">
import Feature from "./Feature.vue";
</script>

<template>
  <Feature />
</template>

嗨，我正在使用带有 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

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

我正在尝试用 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导入）

我究竟做错了什么？