从Laravel文件导入Vue js组件

Question

我已经在js/app.js文件中将一些组件注册为全局组件，但这使得编译后的app.js文件更大。

//example: app.js
Vue.component('profile-page', require('./components/profiles/ProfilePage.vue').default);

问题是:是否有一种方法可以将这些全局组件导入到laravel-刀片文件中，而不是在app.js文件中全局注册？

就像这样：

// laravel-blade file
<script>
    import ProfilePage from ...;
</script>

Answer 1

将组件注册到另一个文件中，而不是app.js

resources/js/example.js

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

将组件编译为webpack.mix.js中的另一个文件

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/example.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

把它包括在刀片里

<script src="/js/example.js"></script>

Answer 2

就像卡迪·DZ回答的那样，这是一种使用laravel混合的方式。(顺便说一句，CaddyDz是我的密友)

https://stackoverflow.com/a/58122158/7668448

多页多包！拉拉维尔混合球是答案。

但是，如果有，多页。继续这样做。有点麻烦。也不是最酷的方法。为此，我开发了一个pakage laravel-mix-glob.。这是一种拉拉维尔混合的包装。对你有魔力的人。

它允许您使用globs并自动处理添加的所有文件。而不是逐个文件地管理它们。一页接一页。

这个用法太简单了。您可以在这里查看该包裹：

https://www.npmjs.com/package/laravel-mix-glob

这些文件解释了一切。您必须检查有关compileSpecifier的部分

你可以给它看一遍。然后你就会更有效率了。魔法就这么发生了。甚至所有的东西都是在文档中解释的，甚至laravel-mix-glob是如何工作的。

您也可以检查此问题。它展示了一些好的观点：

https://github.com/MohamedLamineAllal/laravel-mix-glob/issues/5#issuecomment-537991979

甚至在这里也要清理。这里是一个用例：

// imports
const mix = require('laravel-mix'); // you need the laravel mix instance
const MixGlob = require('laravel-mix-glob');

// init
const mixGlob = new MixGlob({mix}); // mix is required
// or 
const mixGlob = new MixGlob({
    mix, // mix required
    mapping: { // optional
        // see the doc
    },
    // more options maybe added in future version (fill issues if you need anything, or a PR if you like)
});


// use mixGlob
mixGlob.sass('resources/sass/**/*.compile.scss', 'public/css', null, {
    base: 'resources/sass/',
    // compileSpecifier: { 
    //     disabled: true // there is no compile specifier (disabled), and so it will not be removed from the extension (by default disabled = false, and the default specifier = 'compile', and it get removed from the path)
    //      ,
    //      specifier: 'cmp'
    // }
    // mapping: {   // this take precedency over any other mapping // useless feature as laravel-mix doesn't support output in different formats. (until i find a workaround)
    //     ext: {
    //         'scss': 'css' // multiple files separatly
    //     },
        // or
        // ext: 'css', // all to the same
        //   
    // }
})
.js(['resources/js/**/*.compile.{js,jsm}', '!resources/js/secondPattern/**/*'], 'public/js/', null, {
    base: 'resources/js/'
}) // multiple globs pattern as an array. Also with exclusion support (!)
.js('resources/js/secondPattern/**/*.compile.{js,jsm}', 'public/js', null, {
    base: 'resources/js/secondPattern'
})
.ts(['resources/js/ts/**/*.compile.ts', 'resources/js/tsx/**/*.compile.tsx'], 'public/js', null, {
    base: {
        ts: 'resources/js/ts/', // per file extension  mapping
        tsx: 'resources/js/tsx/**/*.compile.tsx'
    }
})
.mix('sass')('resources/sass/summernote.scss', '../resources/views/system/admin/dashboard/partials/_summernote_css.blade.php'); // laravel-mix instance

一些笔记

为了咆哮

.js(['resources/js/**/*.compile.{js,jsm}', '!resources/js/secondPattern/**/*'], 'public/js/', null, {
    base: 'resources/js/'
})

它转换为接收目录js或jsm文件中的所有resources/js/或其所有级别的子目录。而这并不是resources/js/secondPattern/**/*的一部分。并在public/js中输出它们。在基本resources/js/中保持相同的结构。每当您添加一个新的文件，尊重该结构，它将自动为您编译(好，拉拉-混合观察者将重新启动，并与它的整个构建)。你不需要一个文件一个文件地做。完全没有。

例如，假设在开始时，您有6个文件与模式匹配。laravel-mix-glob将自动进行所有6个正确的调用。然后，即使您添加了新文件，它也会自动知道并重新编译。

laravel-mix-glob利用了所有最好的全球模式。以最直观的方式。从简单到最复杂。人们过去常使用全球图书馆。一口一口。或者其他很多工具。会觉得太熟悉了。一切都很简单。医生也解释过了。也有很多例子。

compileSpecifier

这是一个重要的特征。映像您只想捆绑少数文件从许多。添加说明符并将特性自动管理并从输出中删除，这是非常有趣和有效的。这就是动机。默认情况下，您可以停用，如下面的示例所示。

最后一句话

检查文档，因为它更完整，并处理所有不同的部分。这个包裹已经在那里好几个月了。它在Linux上得到了很好的测试。更少在窗户里。但这两个平台的许多用户都使用它。它完美而神奇地工作着。给你更多的安慰，让你更有效率。

同时，作为作者，我对社区太开放了。我和伟大的joy一起复习和处理公关。我喜欢有撰稿人。所以任何有兴趣的人都可以告诉我。在这里或通过填补一个问题。

Answer 3

为了进一步扩展Salim示例，您可以将Vue添加到窗口，并直接在Vue文件中创建导出的Vue组件。

• ​
  1. Laravel混合液中的自燃电压

​

• ​
  1. 在创建全局注册组件时

​

• ​
  1. 与其要求每个组件，不如使用Laravel简化。

​

• ​
  1. 扩展Laravel，删除每个导入、需求、注册和编译步骤--创建一个vue组件并使用它。

​

1)拉力混合中的自动加载值

webpack.mix.js

const mix = require('laravel-mix');

mix.autoload({vue: ['Vue', 'window.Vue']})
   .js(...)
   .css(...)
   .version()

2)在创建Vue组件时在全球注册它们

resources/js/components/profile/profile-image.vue

<template>
    <div class='profile-image' @click='show(user)'>
        <img :src='user.avatar' :alt='`${user.name} profile image`' />
    </div>
</template>

<script>
  /** Note: Global Component Registered Via Vue.component(...) **/

  Vue.component('profile-image', {   
     props: ['user'],

     methods: {
        /** 
         * Show User Profile Page
         */
         show(user) {
            const { location } = window;

            window.location = `${location.origin}/users/${user.id}`;
         }
      }
   });
</script>

3)而不是要求每个组件只使用拉力维尔混合

webpack.mix.js

const mix = require('laravel-mix');

mix.autoload({ 
  vue: [
     'Vue', 
     'window.Vue'
  ] 
})
.js([
      /* --------------------------------- 
       |   Card Components
       | ---------------------------------
       |
       | . Card.vue (Original)
       | . IconCard.vue (Topic Contextually Relevant Icon)
       | . DetailCard.vue (Shown On Detail Pages & Used To Summarize Index Tables)
       |
      */
      'resources/js/components/cards/card.vue',
      'resources/js/components/cards/icon-card.vue',
      'resources/js/components/cards/index-card.vue',
      'resources/js/components/cards/detail-card.vue',
      'resources/js/components/cards/organization-card.vue',

      /* --------------------------------- 
       |   Button Components
       | ---------------------------------
       |
       | . Button.vue (Original)
       | . ButtonRipple.vue (Interactive Click Effects)
       | . ButtonFabIcon.vue (Rounded, Material Design Icons)
       |
      */
      'resources/js/components/buttons/button.vue',
      'resources/js/components/buttons/primary.vue',
      'resources/js/components/buttons/success.vue',
      'resources/js/components/buttons/button-ripple.vue',
      'resources/js/components/buttons/primary-ripple.vue',
      'resources/js/components/buttons/success-ripple.vue',
      'resources/js/components/buttons/button-fab-icon.vue',
      'resources/js/components/buttons/primary-fab-icon.vue',
      'resources/js/components/buttons/success-fab-icon.vue',



      /* --------------------------------- 
       |   Fields Components
       | ---------------------------------
       |
       | . Form.vue (Create & Update)
       | . Detail.vue (Show, Edit, & Cards)
       | . Index.vue (Tables Ex: Sort, Search, Filter)
       |
      */
      'resources/js/components/fields/date/form.vue',
      'resources/js/components/fields/date/index.vue',
      'resources/js/components/fields/date/detail.vue',

      /** Then that one component we actually created ;D **/
      'resources/js/components/profile/profile-image.vue',

], 'resources/js/components/bootstrap.js')


.babel([
      /* ------------------------------------------------------------------
       | Mounting Vue & Using "Babel" (Vanilla JS For Every Browsers)  
       | ------------------------------------------------------------------
       |
       | . Our Components are compiled
       | . Our Last File Being Added Will Mount Vue
       | . We'll Use ".babel()" While Adding This File
       | . "Babel" Simply Transforms All Javascript Into Vanilla JS
       |
      */
        'resources/js/components/bootstrap.js', 
        'resources/js/bootstrap/mount-vue.js'

], 'public/js/app.js')


/*------------------------------*/
/* Optimization Minification   
/*------------------------------*/
.minify('public/js/app.js');

/*------------------------------*/
/* Cache Busting Versioning   
/*------------------------------*/
if (mix.inProduction()) {
  mix.version();
}

4)通过扩展拉力混合进一步简化

resources/js/mix-extensions/mix-every-vue-component.js

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

webpack.mix.js

const mix = require('laravel-mix');

class LaravelMixEveryVueComponent
{
    public constructor() {

    }

}
mix.autoload({ 
  vue: [
     'Vue', 
     'window.Vue'
  ] 
})
.js([
      /* --------------------------------- 
       |   Card Components
       | ---------------------------------
       |
       | . Card.vue (Original)
       | . IconCard.vue (Topic Contextually Relevant Icon)
       | . DetailCard.vue (Shown On Detail Pages & Used To Summarize Index Tables)
       |
      */
      'resources/js/components/cards/card.vue',
      'resources/js/components/cards/icon-card.vue',
      'resources/js/components/cards/index-card.vue',
      'resources/js/components/cards/detail-card.vue',
      'resources/js/components/cards/organization-card.vue',

      /* --------------------------------- 
       |   Button Components
       | ---------------------------------
       |
       | . Button.vue (Original)
       | . ButtonRipple.vue (Interactive Click Effects)
       | . ButtonFabIcon.vue (Rounded, Material Design Icons)
       |
      */
      'resources/js/components/buttons/button.vue',
      'resources/js/components/buttons/primary.vue',
      'resources/js/components/buttons/success.vue',
      'resources/js/components/buttons/button-ripple.vue',
      'resources/js/components/buttons/primary-ripple.vue',
      'resources/js/components/buttons/success-ripple.vue',
      'resources/js/components/buttons/button-fab-icon.vue',
      'resources/js/components/buttons/primary-fab-icon.vue',
      'resources/js/components/buttons/success-fab-icon.vue',



      /* --------------------------------- 
       |   Fields Components
       | ---------------------------------
       |
       | . Form.vue (Create & Update)
       | . Detail.vue (Show, Edit, & Cards)
       | . Index.vue (Tables Ex: Sort, Search, Filter)
       |
      */
      'resources/js/components/fields/date/form.vue',
      'resources/js/components/fields/date/index.vue',
      'resources/js/components/fields/date/detail.vue',

      /** Then that one component we actually created ;D **/
      'resources/js/components/profile/profile-image.vue',

], 'resources/js/components/bootstrap.js')


.babel([
      /* ------------------------------------------------------------------
       | Mounting Vue & Using "Babel" (Vanilla JS For Every Browsers)  
       | ------------------------------------------------------------------
       |
       | . Our Components are compiled
       | . Our Last File Being Added Will Mount Vue
       | . We'll Use ".babel()" While Adding This File
       | . "Babel" Simply Transforms All Javascript Into Vanilla JS
       |
      */
        'resources/js/components/bootstrap.js', 
        'resources/js/bootstrap/mount-vue.js'

], 'public/js/app.js')


/*------------------------------*/
/* Optimization Minification   
/*------------------------------*/
.minify('public/js/app.js');

/*------------------------------*/
/* Cache Busting Versioning   
/*------------------------------*/
if (mix.inProduction()) {
  mix.version();
}

4.扩展Laravel，移除所有额外步骤

laravel-mix-autoload-vuejs-extension.js

const mix = require('laravel-mix');


const CollectFiles = (folder, files = []) => {
    const isFolder = to => File(path.resolve(to)).isDirectory();
    const CombineFiles = (Files, Segments = []) => [ ...files, path.join(__dirname, Segments[0], '/', Segments[1])];

    return fs.readdirSync(folder).reduce((filed, file) =>
            isFolder(`${folder}/${file}`)
                ? CollectFiles(`${folder}/${file}`, files)
                : CombineFiles(files, [folder, file]),
        files
    ).map(string => string.replace(__dirname, ''));
};


class LaravelMixAutoloadVue
{
    constructor()
    {
        this.LoadVueComponents = (to, output) => mix.js(CollectFiles(to), output);

        return mix;
    }

    dependencies()
    {
        return ['fs', 'path'];
    }

    name()
    {
        return ['vuejs'];
    }

    register(to, output)
    {
        if (typeof to === 'undefined') {
            return console.log(`Output is undefined for codesplit path ${to}`);
        }

        this.LoadVueComponents(to, output);
    }

    boot()
    {
        console.log("Booting Example");
    }
}

mix.extend('vuejs', new LaravelMixAutoloadVue());

webpack.mix.js webpack.mix.js

const mix = require('laravel-mix');
require('./laravel-mix-autoload-vuejs`);

mix.autoload({ 
  vue: [
     'Vue', 
     'window.Vue'
  ] 
})
      /* -------------------------------------------------------------
       |  Laravel Mix Autoload Vue Extensions Handles All Components
       | -------------------------------------------------------------
      */
.vuejs('resources/js/components/', 'resources/js/components/bootstrap.js') 
.babel([
      /* ------------------------------------------------------------------
       | Mounting Vue & Using "Babel" (Vanilla JS For Every Browsers)  
       | ------------------------------------------------------------------
       |
       | . Our Components are compiled
       | . Our Last File Being Added Will Mount Vue
       | . We'll Use ".babel()" While Adding This File
       | . "Babel" Simply Transforms All Javascript Into Vanilla JS
       |
      */
        'resources/js/components/bootstrap.js', 
        'resources/js/bootstrap/mount-vue.js'

], 'public/js/app.js')


/*------------------------------*/
/* Optimization Minification   
/*------------------------------*/
.minify('public/js/app.js');

/*------------------------------*/
/* Cache Busting Versioning   
/*------------------------------*/
if (mix.inProduction()) {
  mix.version();
}