如何在Laravel 9项目中安装Vuetify

Question

我在使用Vue(2.6)的Laravel 9项目上安装Vuetify有困难。(不使用Jetstream)

根据https://vuetifyjs.com/en/getting-started/installation/#webpack-install，我使用

npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D

然而，我迷失在下一个指令(s)关于webpack.config.js和src/plugins/vuetify.js。有人能解释一下，接下来的步骤是什么，我需要在资源/js/app.js中做什么改变来使用Vuetify组件?

Answer 1

当您在Laravel项目中安装Vuetify时，您不需要更改Webpack中的任何内容，除了常规的Vue内容，如下所示:

webpack.min.js // located in laravel root directory
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');

在resources/js/plugins/vueity和vuetify目录下创建一个目录，在index.js目录下创建一个新文件index.js，可以这样做:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
// opts options are optional, but I've added them as a simple.
const opts = {
theme: { dark: true }, 
rtl: true
}
export default new Vuetify(opts)

现在在app.js:

import vuetify from './plugins/vuetify' // and import the js file
const app = new Vue({
...
vuetify, // add this line
...
});

，然后在根组件或etc中添加v-app，如下:

App.vue
<template>
<v-app> // this tag as a root element in your vue app is necessary. 
<v-alert
border="right"
color="blue-grey"
dark
>
I'm an alert with a right border and blue-grey color
</v-alert>
</v-app>
</template>

当然，如果你有任何冲突，你可以使用下面的依赖:

"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vuetify": "^2.6.4"
}

上面的依赖项并不都与Vuetify相关，但如果版本冲突，您可以像上面那样设置库的版本。

Answer 2

它要求对webpack.config.js进行一些更改。在Laravel中，我们没有这个文件。

你可以尝试使用Laravel Mix的覆盖方法(在webpack.mix.js中)

mix.override(config => {
config.modules.rules.push({
test: /.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true // optional
},
// Requires >= sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
},
},
},
],
})
})

然后在resources/js/plugins/vuetify.js上创建一个文件，按照vuetify站点

上的说明创建以下内容

//resources/js/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

和包含插件在您的resources/js/app/js文件

//resources/js/app/js

import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export
new Vue({
vuetify,
}).$mount('#app')

Laravel Mix Docs - Quick Webpack Configuration

Laravel Mix Docs - API - Override Webpack Config