我创建了一个全新的Laravel项目.为了使用Vue JS,我试着安装了这个软件包,

@vitejs/plugin-vue

但这让我犯了一系列错误,

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vitejs/plugin-vue@3.0.0
npm ERR! Found: vite@2.9.14
npm ERR! node_modules/vite
npm ERR!   dev vite@"^2.9.11" from the root project
npm ERR!   peer vite@"^2.9.9" from laravel-vite-plugin@0.4.0
npm ERR!   node_modules/laravel-vite-plugin
npm ERR!     dev laravel-vite-plugin@"^0.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.0.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   @vitejs/plugin-vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite@3.0.0
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @vitejs/plugin-vue@3.0.0
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     @vitejs/plugin-vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

我遵循这些步骤,

1.laravel new {proj_name}.



2. npm install vue@next.



3. npm install.



4. After that I created a vue file and imported into app.js (resources/js/app.js).



5. I went to the blade file and cleared all -> hit `!` for emmet snippet, created a div with id #app, and add
    @vite('resources/js/app.js').

I throw an error saying install @vitejs/plugin-vue. But when I try to install that it throws me those errors.

推荐答案

npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue@2.3.3
composer require innocenzi/laravel-vite:0.2.*
npm i -D vite vite-plugin-laravel

快点配置.JS公司

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import laravel from 'vite-plugin-laravel'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
        input: [
            'resources/css/app.css',
            'resources/js/app.js',
        ],
        refresh: true,
    })
    ]
})

也许你需要更改应用程序.js公司

import {createApp} from 'vue/dist/vue.esm-bundler.js';

或对于异步组件,添加defineAsyncComponent

import {createApp, defineAsyncComponent} from 'vue/dist/vue.esm-bundler.js';

✓快♫♫离开空白♫

Laravel相关问答推荐

Livewire 3软件包开发

Laravel 获取具有多对多关系的中间表数据

使用枢轴插入多对多时的Laravel问题

如何在 laravel 5.8 中显示自定义消息?

处理程序类中的错误 - Laravel

laravel 基本路径

转储或 dd laravel 在结果前添加字符时出错

Laravel 将参数从路由传递到过滤器

php Laravel-遇到格式不正确的数值(在字符串上)

如何在 Laravel 5.2 中手动发送密码重置请求?

如何利用 StorageFacade 的 Filesystem 类的 glob 方法?

如何仅在Blade模板存在时才包含它?

将自定义消息(或任何其他数据)传递给 Laravel 404.blade.php

Laravel 5 Carbon 全局语言环境

Laravel Queue,Beanstalkd vs Database,有什么区别?

Grammar::parameterize() 必须是数组类型

Lumen/Laravel 6:调用未定义的函数 array_except()

将参数传递给 Laravel 中的中间件

如何使 Laravel (Blade) 文本字段只读

限制自己重载外部 API 的速率