标签: vuejs3

我收到此错误

编译失败。./node_modules/primeflex/src/_variables.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref --8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_modules/primeflex/src/_variables.scss) 模块错误（来自./node_modules/sass-loader/dist/cjs.js）：找不到模块“sass”需要堆栈：

• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/utils.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/index.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/cjs.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/loader-runner/lib/loadLoader.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/NormalModule.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/NormalModuleFactory.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/Compiler.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/webpack.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/lib/commands/serve.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/lib/Service.js
• /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/bin/vue-cli-service.js

当我导入scss时primeflex

import 'primeflex/src/_variables.scss';
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_display.scss';
import 'primeflex/src/_text.scss';
import 'primeflex/src/flexbox/_flexbox.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_elevation.scss';

这是我的package.json

{
    "name": "dacal",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "scss": "sass --watch scss -o css"
    },
    "dependencies": {
        "@vueform/multiselect": "^1.4.0",
        "@vueform/slider": "^1.0.5",
        "@vueform/toggle": "^1.1.0",
        "axios": "^0.21.1",
        "core-js": "^3.6.5",
        "mdb-vue-ui-kit": "*",
        "node-sass": "^6.0.0",
        "primeflex": "^2.0.0",
        "primeicons": …

我正在使用 TypeScript 和 Vuex4 开发 Vue 3 项目。现在我正在使用 TS 为 vuex 中的每个存储模块使用样板声明方法。看起来像这样：或者如果我的代码可读性不够，这是我用来指导我的：https ://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230

//#region Store
export const state: State = {
  stateVar: null,
  isError: false,
};

export const getters: GetterTree<State, RootState> & Getters = {
  getStateVar: state => state.stateVar,
  getIsError: state => state.isError,
};

export const mutations: MutationTree<State> & Mutations = {
  [ModuleMutationTypes.setStateVar](state: State, payload: StateVarType) {
    state.stateVar = payload;
  },
  [ModuleMutationTypes.setIsError](state: State, payload: boolean) {
    state.isError = payload;
  },
};

export const actions: ActionTree<State, RootState> & Actions = …

我想在 vuejs 3 上的应用程序中使用这个库intl-tel-input。有一个现成的组件vue3-tel-input。

问题：指令 v-model 不起作用 - 作为模型传递到组件的数据变量不会更改。

从组件发出的每个输入事件都会工作三次 - 在控制台中可见。

沙盒

此致。

在这里问同样的问题后我仍然遇到这个问题：从身份验证端点返回的 JSON 无效，但状态代码为 200，没有响应。我查看了类似的问题并遵循了建议：将广播驱动程序设置为“pusher”，在 app.config 文件中取消注释“App/BroadcastServiceProvider”类，在 .env 文件中将调试模式设置为 false 等。我有还查看了 Pusher 文档，但问题对我来说仍未解决。

我已经通过添加“/broadcasting/auth/”身份验证端点和标头更新了之前的尝试，但仍然出现相同的错误。但我现在可以看到 302 重定向到身份验证路由，然后 302 重定向到登录路由，然后到仪表板，在 Laravel Telescope 上有 200 响应，这是我以前没有看到的。因此，这对我来说添加身份验证端点应该可以解决问题，但事实并非如此。

我还尝试设置和使用“/ Pusher / auth /”身份验证端点路由和控制器，但它给了我“无法加载资源：服务器响应状态为405（不允许方法）”以及“错误” ：无法从 auth 端点检索 auth 字符串 - 从 /pusher/auth 收到状态：405，但不是之前的无效 json 错误。我通过向控制器发送“get”请求得到此信息，但收到带有“的 500 内部服务器错误” post'请求。我真的不知道哪个是正确的。

这是我的 bootstrap.js 文件：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    authEndpoint: '/broadcasting/auth', …

我正在使用 vue js 3，但我遇到了这个错误。我尝试使用路由器。

我的 main.js 文件在这里：

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

import VueRouter from 'vue-router'  // i added this
import Vue from 'vue';    // and this
Vue.use(VueRouter);       // and this

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

我的 package.json 文件在这里：

{
  "name": "router",
  "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",
    "vue-router": "^3.5.1"
  },
  "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",
    "babel-eslint": "^10.1.0", …

我使用 vue 3 设置，我想访问我使用的全局变量 vuetify。\n我可以在 config.globalVariable 中看到它，但我无法在设置中使用它。

{_uid: 0, _component: {\xe2\x80\xa6}, _props: null, _container: div#app, _context: {\xe2\x80\xa6}, \xe2\x80\xa6}\ncomponent: \xc6\x92 component(name, component)\nconfig: Object\ncompilerOptions: (...)\nerrorHandler: undefined\nglobalProperties:\n$vuetify: {defaults: {\xe2\x80\xa6}}\n$messageSystem: {addMessage: \xc6\x92}\n__proto__: Object\nisNativeTag: (tag) => {\xe2\x80\xa6}\n...\n

如您所见，我看到了 $vuetify，但在设置中我无法访问它。

    setup() {\n       ...\n       this.$vuetify.theme.dark = true; \n       ...\n\n

这是我访问全局变量的方式吗？

我得到的错误：\nCannot read property \'$vuetify\' of undefined

我正在使用 vuejs 3 和 TS。

我在 TS 中创建了这样的翻译文件：

索引.ts:

export default {
 'example': 'example',
}

然后为了以这种方式使用它：

{{ $t('example') }}

现在我想将参数传递给翻译，例如：

索引.ts:

export default {
 'hi_man': 'Hi {name}',    //where the name is the parameter
}

我怎样才能做到这一点？

我一直在研究我看到的这个 Vetur 小问题 - 并且已经看到了一些关于 Vue3 + ts + Vetur 的 tsconfig 修改的答案 - 但大多数现在似乎是死胡同，因为我已经在我的 tsconfig 中进行了建议的修复或者建议的修复方案对我看到的警告没有太大帮助。

我尝试添加dom、es2016和dom.iterablelib 包，但没有任何效果。我可能认为我的 tsconfig 中的其他内容存在冲突或冲突，但似乎无法将其缩小到任何结论性的范围。

我也尝试过cmd+shitf+p当时的Developer: Reload window技巧，但没有成功。重启VSCode，还是不行。

我基本上看到了一般的 Vetur 错误，例如：

“ Cannot find name window“， “ Cannot find name document“， “ Cannot find name HTMLElement“ 和 ” Cannot find name HTMLCanvasElement”。

这是我的完整内容tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node", …

有这个代码：

<li v-for="(dog, index) in dogs" :key="index" class=" hover:bg-gray-50" :class="{ 'bg-red-50': index === focus }" @keyup.enter="goToSlug(dog)"> .... </li>

我完美地处理了焦点，但想在按下 Enter 键时运行 goToSlug() 方法。它不会触发该方法。

我正在使用 VueJS 3 应用程序，其中使用vue-router、vue和core-js应用程序，我想在其中使用组件。我的视图目录Home.vue文件如下所示：

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    }, …