标签: vuejs3

所以，我注意到我的一些顺风CSS在生产中没有正确生成，但在我的本地上表现良好，有什么想法吗？我正在使用，vue + tailwind + laravel + 惯性堆栈。另外，我在生产中部署任何东西都没有经验，因此我正在使用 digital ocean 的新“应用程序”。

生产

• Ubuntu 18.04.5 LTS
• 节点版本：12.22.5

当地的

• Ubuntu 20.04.2 LTS
• 节点版本：v16.7.0

它应该是什么样子（本地）

结果如何（生产）

这是我的 tailwind.config.js

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    // './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        gray: {
          750: '#2d3748',
          850: '#1a202c'
        },
      },
      spacing: {
        112: '28rem',
        120: '30rem',
        128: '32rem',
        136: '34rem',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我在构建生产中运行的命令

Build Command
composer …

我正在使用Vue3and Vuex4，我不断收到错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at ReactiveEffect.eval [as fn] (App.vue?3dfd:36)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1087)
    at setup (App.vue?3dfd:37)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6272)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6228)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4081)
    at processComponent (runtime-core.esm-bundler.js?5c40:4056)
    at patch (runtime-core.esm-bundler.js?5c40:3651)

我正在尝试将“hello”设置为消息变量，以便我可以在整个应用程序中使用它，这是我的main.js文件：

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


const store = createStore({
  state(){
    return{
      message: 'hello'
    } …

在一个使用Laravel++设置Vue3的Inertia项目中Laravel Mix，我们如何创建前端测试？

特别是，我不知道如何处理' InertiasShare Data和方法？usePage()useForm

我面临的第一个错误是：

    TypeError: Cannot read properties of undefined (reading 'someSharedData')                                                                                          
                                                                                                                                                              
      2 |                                                                                                                                                     
      3 | export const handleSometing = (something) =>                                                                                                        
    > 4 |   usePage().props.value.someSharedData                                                                                                
        |   ^                                                                                                                                                 
      5 |     ...                                                                                                              
      6 |   )

由于我对写问题还很陌生，我对可能的错误表示歉意。

问题：我有一个带有打字稿的 vue 应用程序。

export default {
    methods: {
        setProgram: (program: Program)=>{
            this.program = program // TS2532: Object is possibly 'undefined'.
            this.step++ // TS2532: Object is possibly 'undefined'.
        }
    },
    ...
}

虽然我真的很喜欢打字稿的这个功能，但我真的确信，在这种情况下“this”不会是未定义的。

我怎样才能让打字稿平静下来关于“this”的使用？

非常感谢大家，祝你有美好的一天！

最好的多姆。

我对 Vue.js 很陌生，在开发我的第一个项目时，我偶然发现了一个我认为与组件生命周期相关的问题。

上下文如下：我正在使用带有组合 API 的 Vue 3。

我有一个“地图”组件，其中使用 d3.js 来显示图表。在我的 Setup() 方法中，我有 onBeforeMount() 和 onMounted()。在 onBeforeMount() 方法中，我想使用 Firestore 数据库中的数据作为图表中的值。第 47 行的 console.log 正确显示了数据。在 onMounted() 中，我计划放置 d3 图表。但是当我尝试访问 console.log 第 55 行中的数据时，我得到了未定义的信息...

理想情况下，我想从“地图”组件中从数据库中获取数据并使用它来创建图表，然后让组件渲染图表。然后我会有另一个名为“MapSettings”的组件，它将能够更改“Map”中的数据，例如过滤器等...并在图表中自动更新值。最后，两个组件将是兄弟组件并且具有相同的父组件因此“Map”和“MapSettings”处于同一层次结构级别。

但首先我需要理解为什么我变得不确定..任何帮助或建议将不胜感激！

您好，我正在尝试在 Vue 3 中导入一个组件。这是我的组件结构：

+src
  +App.vue
  +components
    +Navbar.vue

在我的 App.vue 中我尝试过：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<Navbar/>
</div>
</template>
<script>
import  Navbar  from './components/Navbar.vue';
</script>

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

import mitt from 'mitt';
const emitter = mitt();

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(BootstrapVue3)
app.mount('#app')
app.config.globalProperties.emitter = emitter;

但我收到这个错误：

Already included file name '/home/jip/Projects/snippedit/client/src/components/Navbar.vue' differs from file name '/home/jip/Projects/snippedit/client/src/components/navBar.vue' only in …

我想将 2 个 props 传递给我的组件。两者都是 String，但只能传入 title props。我通过将 url 传递给 title props 来检查 posterUrl，它可以工作。但是当我将其作为海报发送时，无法收到标题。所以我确信这不是有问题的数据。

然后我尝试使用默认值，图像显示出来，但它们都使用默认值。我尝试过使用速记、v-bind 和标准使用，但没有任何效果。

组件看起来像这样

    app.component('item-movie', {
        props: {
            title: String,
            posterUrl: {
                type: String,
                default: "https://image.tmdb.org/t/p/original/5NYdSAnDVIXePrSG2dznHdiibMk.jpg",
            },
        },
        template:
            /*html*/
            `
        <div class="col-md" style="margin-bottom: 2rem; margin-top: 2rem;">
            <img class="img-fluid" style="min-width: 300px;" v-bind:src="posterUrl">
            <p style="margin-top: 1rem; margin-bottom: -0.3rem; color: white;">{{ title }}</p>
        </div>
        `,
    })

我这样用

        <item-movie v-for="movie in movies" :key="movie.id"
          :title="movie.title" :posterUrl="imageUrl+movie.poster_path">
        </item-movie>

我正在尝试在 Nuxt 3 项目中添加自定义布局，但该布局不起作用，并且控制台显示以下消息：

选择的布局 test_layout 无效

没有其他错误。

这是我尝试过的代码：

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

-| layouts/
 ---| test_layout.vue
-| pages/
 ---| blog/index.vue

<template>
  <div>
    My Test Layout Header
    <slot />
  </div>
</template>
<script>
export default {
  name: "test_layout"
}
</script>

我已经尝试<Nuxt/>代替<slot />，但它不起作用。

我有这个搜索输入：

<input
class="form-control"
type="text"
name="search"
placeholder="search..."
v-model="search"
/>

这个“输出”区域：

<my-comp
v-for="item in filter"
:key="item.id"
:id="item.id"
:imgsrc="item.imgsrc"
:price="item.price"
:city="item.city"
:country="item.country"
:reviewnum="item.reviewnum"
:daynum="item.daynum"
/>

我从 json 文件导入数据，这就是数据

[
    {"id": 1, "city":"California", "country": "United State of America", "price": "700", "reviewnum": "890", "daynum": "5", "imgsrc": "img/place/1.png"},
    {"id": 2, "city":"london", "country": "United Kingdom", "price": "550", "reviewnum": "900", "daynum": "4", "imgsrc": "img/place/2.png"},
    {"id": 3, "city":"Korola Megna", "country": "Nepal", "price": "350", "reviewnum": "150", "daynum": "5", "imgsrc": "img/place/3.png"},
    {"id": 4, "city":"Miami Beach", "country": "United State of America", "price": …

如何在 VueJs 3 中截断单词或字符？我搜索了一些答案，但对我不起作用。例如，如果描述单词长度超过 200 ，则应在末尾显示 200 个单词并...

到目前为止我尝试过的..

<p>{{ announcement.description | truncate(200) }}</p>

<script>
export default {
data() {
    return {
      announcement: {},
    }
  },
computed:{
    truncate(value, length) {
        if (value.length > length) {
            return value.substring(0, length) + "...";
        } else {
            return value;
          }
    }
  }
}
</script>