Laravel 中安装及配置 Vuetify

Posted 2021-07-08 Grace_Zhong

Reference
Vuetify 安装及配置官方文档

准备工作
已成功安装 laravel/ui 及 vue.
Laravel 登录界面 ↓

Version Information
Laravel Framework 8.40.0
vue: 2.6.12
sass: 1.32.12
sass-loader: 11.1.0
vue-loader: 15.9.5
vue-template-compiler: 2.6.12
vue-router: 3.5.1
vuetify: 2.4.11
vuetify-loader: 1.7.2

使用 Webpack 安装 vuetify 以及相关依赖

npm install vuetify
npm install sass sass-loader fibers deepmerge -D
npm install vuetify-loader

配置

项目根目录中的 webpack-mix.js 文件

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin(),
        ]
    })
    .js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

添加到项目

resources 中新建文件夹 plugins，plugins 中新建文件 vuetify.js
目录结构

• resources
  • plugins
    • vuetify.js

vueitfy.js 中内容为

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

使用

在 resources/js/app.js 中 添加代码

require('./bootstrap');

import Vue from 'vue'
import Vuetify from '../plugins/vuetify'

const app = new Vue({
    el: '#app',
    vuetify: Vuetify
});

检查是否配置成功

在网页中添加 vuetify 元素可以使用

可选

安装 case-sensitive0path-webpack-plugin 插件

npm install --save-dev case-sensitive-paths-webpack-plugin

配置 webpack-mix.js

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-path-webpack-plugin');

mix
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin(),
            new CaseSensitivePathsPlugin()
        ]
    })
    .js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');