symfony 项目中的 Vuetify

Question

我无法找到任何这将是有益的（可能becouse我没有经历过Web开发人员）如何设置Vuetify与Symfony项目。我缺少一个css-loader并且无法弄清楚它应该如何设置。

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

const { VueLoaderPlugin } = require('vue-loader');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/js/app.js')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    .addPlugin(new VueLoaderPlugin())

    .enableVueLoader()

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()

    // allow sass/scss files to be processed
    .enableSassLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

这是非常基本的webpack.congi.js

应用程序.js

import '@babel/polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import router from './router'

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

我找到了如何设置webpackwithvuetify但我觉得它不适用于 symfony 项目。webpack + css 加载器

任何想法我怎么能设置它？

Answer 1

如果您尝试使用Vuetify v2.x执行此操作，而不是从外部 CDN 加载样式（请参阅yerpy's answer），您也可以通过 webpack 加载它们。假设您已经创建了 Symfony 项目，首先，确保安装了symfony encore：

$ composer require encore

然后安装依赖 Vue 和 Vuetify：

$ npm i -S vue vuetify

然后安装开发依赖项：

$ npm i -D vue-loader vuetify-loader vue-template-compiler sass sass-loader fibers

然后，webpack.config.js您需要vuetify-loader在文件顶部导入并按如下方式配置 Encore：

var Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .enableVueLoader() // <-- IMPORTANT: this loads Vue
    // NOTE: I put my Vue app in assets/vue which I think is non-standard
    //       but it allows me to structure my Vue app as I would in a non-Symfony app
    .addEntry('app', './assets/vue/main.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    // add VuetifyLoaderPlugin: THIS loads all of the Vuetify components
    .addPlugin(new VuetifyLoaderPlugin())
    // enables Sass/SCSS support
    .enableSassLoader(options => {
        options.implementation = require('sass')
        options.fiber = require('fibers')
    })
;

module.exports = Encore.getWebpackConfig();

警告，我不是 Symfony 开发人员，所以我不能说这是做到这一点的“最佳”方式。这是一个带有工作示例的存储库，以防您需要查看其他文件/配置以使所有这些东西一起玩得很好。